Question

为什么getElementById(theID)不能使用innerHTML？

使用：

<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>

不起作用：

<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

<script>
function myFunction() {
    document.getElementById(theID).innerHTML = "Paragraph changed!";
}
</script>

JSFIDDLE

getElementById(theID)适用于style.display：

<style>
h2 {
    display: inline;
}
.openclose {
    cursor: pointer; /* or: hand; */
    margin-left: 1em;
    }
    .image {
    display: none;
}
</style>
<script>
function openClose(theID) {
    if (document.getElementById(theID).style.display == "initial") {
        document.getElementById(theID).style.display = "none"
        document.getElementsByTagName("span")[0].innerHTML = "[+]"
    } else {
        document.getElementById(theID).style.display = "initial"
        document.getElementsByTagName("span")[0].innerHTML = "[&ndash;]"
    }
}</script>

<h2>Heading - 1st</h2><span class="openclose" onClick="openClose('a1')">[+]</span>
<br /><br /><img id="a1" class="image" src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAAC
VBMVEX///8AAAD/AADAyZ2wAAAAg0lEQVQ4y73QsQnEMBBE0bFByeVqQlW4BAWa5KpxKZcciK3SA
1IBg4z9E7EvWMTixRJVvQUaShf6kBtQ+ng9SOz4RPxQWF04YraZkHjsWqA158a6CBW7ZsmJ9CTEg
LDhGzF+GvG3gbN1IJsOrQNn0gMJBkCzB8iYNdjQ5usDOMMCvNYFYQmUU1ZqYuIAAAAASUVORK5CY
II=">

<br /><br />
<h2>Heading - 2nd</h2><span class="openclose" onClick="openClose('a2')">[+]</span>
<img id="a2" class="image" src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

经过测试here。

此外，是否可以将getElementsByTagName("span")[0]设置为getElementsByTagName(theTagName)[theIndexNumber]？

Answer 1

您应该将theID作为参数传递。

<p id="demo" onclick="myFunction('demo')">Click me to change my HTML content (innerHTML).</p>

<script>
function myFunction(theID) {
    document.getElementById(theID).innerHTML = "Paragraph changed!";
}
</script>

http://jsfiddle.net/c5ae2uwe/

Answer 2

因为你没有使用正确的ID（'demo'）而是使用一个似乎在你的例子中没有设置的变量。另一个提示，因为你在p元素上调用onClick，你可以用'this'来引用它而不是做另一个文档查找。

this.innerHTML = "Paragraph changed";

Answer 3

您的myFunction期望将其内容更改为参数的元素的ID，但您没有将其传递

<p id="demo" onclick="myFunction('demo')">Click me to change my HTML content (innerHTML).</p>

<script>
function myFunction(theID) {
    document.getElementById(theID).innerHTML = "Paragraph changed!";
}
</script>

演示：Fiddle

Answer 4

请参阅以下代码。变量“theID”传递一个

标签的id值。现在这个变量被传递给getElementById（）函数。

这仅用于解释目的，这被认为是错误的编码。

<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

<script>
function myFunction() {
    var theID = "demo";
    document.getElementById(theID).innerHTML = "Paragraph changed!";
}
</script>

回答你的另一个问题：

此外可能会出现歧义 getElementsByTagName（“span”）[0]之类的东西的getElementsByTagName（theTagName）[theIndexNumber]

getElementsByTagName（）返回一个元素数组。因此你可以使用类似的东西：

的getElementsByTagName（theTagName）[theIndexNumber]

但是确保，函数调用返回了至少一个元素，变量“theTagName”和“theIndexNumber”具有正确的值。

Javascript：为什么getElementById（theID）不能与innerHTML一起使用？

4 个答案: