为什么当我将 div 标签 innerHTML 属性分配给变量时它没有改变？答案

【问题标题】：Why the div tag innerHTML attribute doesn't change when I assigned it to a variable?为什么当我将 div 标签 innerHTML 属性分配给变量时它没有改变？
【发布时间】：2020-10-16 12:14:01
【问题描述】：

我正在编写一个名为 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;
}

【问题讨论】：

应该是div_content.innerHtml = counter
innerHtml 不是有效属性。试试innerHTML。
总是检查错误控制台。

标签： javascript string object

【解决方案1】：

我已经更改了 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

&lt;div id = "d"&gt;0&lt;/div&gt;

要实际更改#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;

&lt;div id = "d"&gt;0&lt;/div&gt;

最后，结合起来，你会得到类似的东西：

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 的缺点和安全风险。

【讨论】：

【解决方案2】：

在第一个函数中，您忘记正确命名变量。

你的代码：

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

【讨论】：