為什么 div 標簽的 innerHTML 屬性在我將其分配給變量時不會改變？

Question

我正在編寫一個名為 increment() 的 JavaScript 函數，其中 div 內容的內容將顯示用戶按下表單中提交按鈕的次數。 但是我的 JavaScript 函數不起作用：

let div_content = document.getElementById('d').innerHTML; 

function increment(){
  counter++;  
  div_content = counter;
}

這是 HTML 代碼：

<form onsubmit="increment(); return false;">
   <input type="submit" value="Submit" id="btn">
  </form>  
  <div id = "d">
    0
  </div>  

我已經更改了 JS 代碼並且它起作用了，但是當我刪除變量 div_content 時，我無法理解它為什么起作用。

let counter = 0;
function increment(){
  counter++;
  document.getElementById('d').innerHTML = counter;

}

更新：

感謝您的幫助。 我終於明白發生了什么：這行代碼div_content = document.getElementById('d').innerHTML; 創建一個字符串變量而不是一個對象。 這就是 div 標簽內的內容沒有改變的原因。

正確的 JavaScript 代碼必須是：

let counter = 0;
const div_content = document.getElementById('d'); 

function increment(){
  counter++;  
  div_content.innerHTML = counter;
}

Answer 1

在第一個函數中，您忘記正確命名變量。

你的代碼：

let div_content = document.getElementById('d').innerHTML; 

function increment(){
  counter++;  
  div = counter;
}

正確的代碼需要是：

let div_content = document.getElementById('d').innerHTML; 

function increment(){
  counter++;  
  div_content = counter;
}

Answer 2

我已經更改了 JS 代碼並且它起作用了，但是當我刪除變量 div_content 時，我無法理解它為什么起作用。

根據您的定義，您的div_content只是一個靜態字符串：

let div_content = document.getElementById('d').innerHTML; 

這只是將當時innerHTML的值分配給變量div_content 。 它現在與元素完全無關。 因此，將該字符串更改為counter會更改字符串，但不會更改#d的內容：

div_content = counter; //REM: Assuming div was a typo

 let counter = 1; //REM: div_content holds the string value of innerHTML at this time; let div_content = document.getElementById('d').innerHTML; console.log(div_content); //REM: div_content now holds the value of counter div_content = counter; console.log(div_content); //REM: Yet the innerHTML of #d never gets changed

 <div id = "d">0</div>

要實際更改#d的innerHTML ，您必須將元素分配給div並在更新其屬性后：

let div = document.getElementById('d').innerHTML;
div.innerHTML = counter;

 let counter = 1; //REM: div holds a reference to the element #d let div = document.getElementById('d'); //REM: The innerHTML of #d gets changed to the content of counter div.innerHTML = counter; //REM: This equals your final solution of document.getElementById('d').innerHTML = counter;

 <div id = "d">0</div>

最后，結合起來，你最終會得到類似的東西：

 document.querySelector('button').onclick = increment; //let div_content = document.getElementById('d').innerHTML; let div = document.getElementById('d'); let counter = 0; function increment(){ counter++; //div = counter; div.innerHTML = counter; }

 <button>inc</button> <div id = "d"> 0 </div>

請注意使用innerHTML的缺點和安全風險。