Masalah Javascript DOM

Saya mencoba membiasakan diri dengan javascript DOM.
Tapi saya tidak bisa memahami masalahnya.

Fungsinya seharusnya menampilkan nama yang saya masukkan dengan halo, tetapi apa pun yang saya lakukan, itu hanya menampilkan halo, siapa.

kode html:

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

ini kode js saya.

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

Apa yang saya coba:

Saya mengubah acara dari oninput ke onkeyup, tetapi mendapatkan hasil yang sama.

Solusi 1

Masalah pertama adalah Anda menggunakan string biasa, bukan a Templat literal[^].

Masalah kedua adalah itu name adalah properti di window obyek. Ketika fungsi event handler dipanggil, properti itu menyembunyikan name variabel. Ubah variabel Anda menjadi seperti fname alih-alih.

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

Demo[^]