存储在变量中的innerHTML的修改不起作用

时间:2018-04-17 12:30:40

标签: javascript html dom

我想将页面的显示区域存储在变量(代码中的display)中,即我的示例中display div的innerHTML,但是当我这样做时,我无法修改它的内容。

function stored() {
  var display = document.getElementById("display").innerHTML;
  display = "Bonjour";
}

function notStored() {
  document.getElementById("display").innerHTML = "Hello";
}
<button onclick="stored()">Stored in variable</button>
<button onclick="notStored()">Not stored in variable</button>
<div id="display"></div>

我该怎么办?

感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

这是因为您为display变量分配了新值。您要做的是将innerHTML display设置为变量,例如stored。通过这样做,您将所需的innerHTML存储为变量。

&#13;
&#13;
function stored() {
  var stored = "Bonjour";
  var display = document.getElementById("display").innerHTML = stored;
}

function notStored() {
  document.getElementById("display").innerHTML = "Hello";
}
&#13;
<button onclick="stored()">Stored in variable</button>
<button onclick="notStored()">Not stored in variable</button>
<div id="display"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

innerHTML属性是一个简单的String,因此它是不可变的,而且,您只是为变量赋值而不是更新当前的HTML内容。

您需要将新值分配给属性innerHTML

function stored() {
  document.getElementById("display").innerHTML = "Bonjour";
}

function notStored() {
  document.getElementById("display").innerHTML = "Hello";
}
<button onclick="stored()">Stored in variable</button>
<button onclick="notStored()">Not stored in variable</button>
<div id="display"></div>