Problema DOM de Javascript

programación

2023.12.14

Estoy intentando acostumbrarme al DOM de JavaScript.
Pero no puedo resolver el problema.

La función debería mostrar el nombre que ingresé con hola, pero no importa lo que hice, solo muestra hola y quién.

código HTML:

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

aquí está mi código 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);
                }
              }

Lo que he probado:

Cambié el evento de oninput a onkeyup, pero obtuve el mismo resultado.

Solución 1

El primer problema es que estás usando una cadena normal en lugar de una Literal de plantilla[^].

El segundo problema es que name es una propiedad en el window objeto. Cuando se llama a la función del controlador de eventos, esa propiedad oculta el name variable. Cambia tu variable a algo como fname en cambio.

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";
    }
}

Manifestación[^]