时间戳

首页 > 解决方案 > 为什么当我将 div 标签 innerHTML 属性分配给变量时它没有改变？

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

问题描述

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

标签： javascriptstringobject

解决方案

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

你的代码：

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

推荐阅读