javascript - 为什么说元素为空？

Question

<p id = "a" onclick = "doThis()">ABCD</p>
function doThis() {
    output = document.getElementById("a");
    alert(output.innerHTML);
    //alert should say ABCD//
}

上面的代码工作正常。现在，我的问题是，我有多个 ID，我想动态更改它们。我尝试通过向 doThis() 添加参数来做到这一点；它工作正常，但是当我设置 temp = document.getElementById(stringId) 并尝试提醒 innerHTML 时，控制台给我一个错误，说它无法读取 innerHTML，并且 temp 为空。怎么和上面的不一样？

<p id = "a" onclick = "doThis(a)">ABCD</p>
<p id = "b" onclick = "doThis(b)">EFGH</p>
function doThis(x) {
    theId = '"' + x + '"';
    output = document.getElementById(theId);
    //here I used alert to test it. Both output and it's innerHTML is "null". Why isn't the innerHTML ABCD or EFGH?//

Answer 1

您只需将点击更改为 "doThis('a')"，然后您的代码就会起作用。现在您没有传递字符串，这是 getElementById 所期望的。

function doThis(x) {
  output = document.getElementById(x);
  console.log(output.innerHTML)
}

<p id="a" onclick="doThis('a')">ABCD</p>
<p id="b" onclick="doThis('b')">EFGH</p>

这是一个片段，显示了您在问题中传递的内容:

function doThis(x) {
  console.log(typeof(x));
}

<p id = "a" onclick = "doThis(a)">ABCD</p>
<p id = "b" onclick = "doThis(b)">EFGH</p>

如您所见，您传递的是对象，而不是字符串。