Question

我正在处理一个简单的JavaScript代码，我不知道它是什么不起作用。如果你搞清楚，请告诉我。

<!DOCTYPE html>
<html>
<head>
<script>
function displayText(){
var xa = document.getElementById('abcd').innerHTML;
xa+= 'asdf';
}

displayText();  
</script>
</head>
<body>
<div id="abcd"></div>
</body>
</html>

Answer 1

innerHTML返回元素当前内容的String，而不是指向它的指针。所以请改用它：

function displayText(){
  document.getElementById('abcd').innerHTML += 'asdf';
}

或

function displayText(){
  var el = document.getElementById('abcd'); 

  var xa = el.innerHTML;
  xa += 'asdf';

  el.innerHTML = xa;
}

此外，在实际创建您引用的元素之前，您无法调用该函数。因此，请在正文标记的底部移动调用。

<!-- .... -->
<script>
  display();
</script>
</body>

Answer 2

在代码运行时，身体（包括你的div）尚未被解析。 getElementById('abcd')当时没有找到任何内容。

将脚本元素移动到正文的末尾，以便在解析正文后运行，或者从displayText()处理程序调用{{1}}函数。

（如果您打算将onload中的新值显示在同一字段中，则需要将其写回xa的元素。）

Javascript代码不起作用？告诉我为什么

2 个答案: