如何使用javascript變量更新HTML中的span元素？

Question

我正在嘗試更新span元素以顯示我的javascript變量是否正確？

 var hometown = "Indianapolis" ; document.getElementById('hometown').innerHTML = 'Indianapolis'; 

 Hometown: <span id="hometown"></span> 

謝謝你的幫助

Answer 1

它基本上是正確的，除非你從不使用你的變量，所以沒有指向變量。 如果要使用變量進行更改，則可以執行此操作。

 var hometown = "Indianapolis"; document.getElementById('hometown').innerHTML = hometown; 

 Hometown: <span id="hometown"></span> 

使用此代碼，您可以將文本輸入設置為變量hometown ，就像這樣。

 function update() { var hometown = document.getElementById("text").value; document.getElementById("hometown").innerHTML = hometown; } 

 Hometown: <span id="hometown"></span> <br> <input type="text" id="text"> <input type="button" onClick="update()" value="Update"> 

我知道這個有點復雜，但它有效，而且這都是你的代碼。

Answer 2

不完全的。 您沒有使用變量。

document.getElementById('hometown').innerHTML = hometown;

由於您沒有設置html內容，因此使用.textContent屬性是一個更好的選擇：

document.getElementById('hometown').textContent = hometown;

還要確保在選擇元素之前將元素添加到DOM，即將腳本放在目標span元素之后。

Hometown: <span id="hometown"></span>
<script> /* JavaScript code goes here */  </script>