【解決方法】Javascript DOM の問題

JavaScript DOM に慣れようとしています。
しかし、問題がわかりません。

この関数では、「hello」と入力した名前が表示されるはずですが、何をしても「hello」と「who」しか表示されません。

htmlコード:

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

これが私の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);
                }
              }

私が試したこと：

イベントをoninputからonkeyupに変更しましたが、同じ結果が得られました。

解決策 1

最初の問題は、文字列ではなく通常の文字列を使用していることです。テンプレートリテラル[^]。

2番目の問題は、 name のプロパティです window 物体。イベントハンドラー関数が呼び出されると、そのプロパティは name 変数。変数を次のように変更します fname その代わり。

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