为啥我不能用 `var output = document.getElementById('message').innerHTML;` 做一个循环

Posted 2023-05-07

【中文标题】为啥我不能用 `var output = document.getElementById(\'message\').innerHTML;` 做一个循环

【英文标题】：why can't I do a loop with `var output = document.getElementById('message').innerHTML;`为什么我不能用 `var output = document.getElementById('message').innerHTML;` 做一个循环

【发布时间】：2021-12-31 11:04:47

【问题描述】：

请您解释一下，如果我想在第二个示例中将 'innerhtml' 存储在 'output' 变量中，为什么我不能执行循环？：'var output = document.getElementById('message ').innerHTML;'

var x = 0;
var output = document.getElementById('message');
do 
  output.innerHTML = output.innerHTML + x;
  x = x + 1;

while (x < 6);
------------------------------------------------------------                                                                
var x = 0;
var output = document.getElementById('message').innerHTML;
do 
  output = output + x;
  x = x + 1;

while (x < 6);

【问题讨论】：

两个 sn-ps 工作正常，但他们做不同的事情。第一个更改 HTML 元素的内容，第二个更改字符串变量。当然，HTML 元素和字符串变量是完全不相关的，改变字符串对 HTML 元素没有任何影响

我很困惑第二个例子有什么问题。你期望得到什么？

我希望得到012345，就像在第一个示例中一样。

【参考方案1】：

如果您对为什么不能将innerHTML 添加到output 中的output = output +x 感到困惑，但第一个示例可以。这是因为第一个示例，输出应该存储类似[object ...] 的内容。所以每次output.InnerHTML都会不断更新。对于第二个示例，您已经将output 设置为message 的innerHTML，并且它已经成为一个字符串，而不是html。所以你不能使用innerHTML 来改变任何东西。 innerHTML only help to change the value of html` 标记，这就是循环不起作用的原因。

【讨论】：

嗨，肖恩。还是很奇怪。如果我有：document.getElementById('message').innerHTML = document.getElementById('message').innerHTML + x; 在以下示例中：var x = 0; do document.getElementById('message').innerHTML = document.getElementById('message').innerHTML + x; x = x + 1; while(x < 6);，则循环将运行。

document.getElementById('message').innerHTML = document.getElementById('message').innerHTML + x; 和output = output + x 好像是一样的，如果var output = document.getElementById('message').innerHTML

@Chris，我只是想知道您是否对为什么不能在第二个示例或其他示例中使用 output.innerHTML = output.innerHTML + x 感到困惑。我不能完全理解你的困惑，所以我不知道如何帮助你

我可以使用output.innerHTML = output.innerHTML + x。我的问题是，我不明白，如果我想使用var output = document.getElementById('message').innerHTML; + output = output + x; @Shawn

，为什么我不能做一个循环

@Chris，你确定你的其他代码是正确的吗？我只是运行第二个示例代码，它返回012345。我把图片放在问题中

【参考方案2】：

循环有效 但你不能添加这样的东西 var output = document.getElementById('message').innerHTML; 输出 = 输出 + x;

enter image description here

【讨论】：

嗨，马赫迪。但这是我的问题：为什么我不能将“innerHTML”添加到“输出”变量？

因为当您说 document.getElementById('message').innerHTML 时，您只有一个普通字符串，例如 let test = 'test' 并且您无法在 UI (HTML) 中更改某些内容