Problème Javascript DOM

la programmation

2023.12.14

J’essaie de m’habituer au DOM javascript.
Mais je n’arrive pas à comprendre le problème.

La fonction devrait afficher le nom que j’entre avec bonjour, mais peu importe ce que j’ai fait, elle n’affiche que bonjour, qui.

Code HTML:

<pre>
<form>
    <input type="text" placeholder="name" autocomplete="off" onkeyup="full()" id="fname">
</form>
 <p id="p"></p>

voici mon code js.

Javascript

var name = document.getElementById("fname");
var p = document.getElementById("p");
              function full(){
                if (name.value) {
                    p.innerHTML = "hello, ${name.value}";
                    console.log(1);
                }
                else {
                    p.innerHTML = "hello, who";
                    console.log(2);
                }
              }

Ce que j’ai essayé :

J’ai changé l’événement de oninput à onkeyup, mais j’ai obtenu le même résultat.

Solution 1

Le premier problème est que vous utilisez une chaîne normale plutôt qu’un Littéral de modèle[^].

Le deuxième problème est que name est une propriété sur le window objet. Lorsque la fonction de gestionnaire d’événements est appelée, cette propriété masque le name variable. Changez votre variable en quelque chose comme fname plutôt.

Javascript

const fname = document.getElementById("fname");
const p = document.getElementById("p");

function full() {
    if (fname.value) {
        p.innerHTML = `hello, ${fname.value}`;
    } else {
        p.innerHTML = "hello, who";
    }
}

Démo[^]