Javascript: Why doesn't getElementById(theID) work with innerHTML?

Question

Why doesn't getElementById(theID) work with innerHTML?

Works:

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

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

Doesn't work:

<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) works with 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">

As tested here.

Additionally is it possible to ambiguate getElementsByTagName("span")[0] to something like getElementsByTagName(theTagName)[theIndexNumber]?

Answer 1

You should pass theID as a parameters.

<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

Because you're not using the correct ID ('demo') and instead using a variable which doesn't appear to be set anywhere in your example. Another tip, since you're calling onClick on the p element you can reference it with 'this' instead of doing another document lookup.

this.innerHTML = "Paragraph changed";

Answer 3

Your myFunction is expecting the ID of the element whose content to be changed as a parameter, but you are not passing it

<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>

Demo: Fiddle

Answer 4

See the below code. the variable "theID" is passed a value of the id of

tag. Now this variable is passed to the getElementById() function.

This is just for explanation purpose and this is considered as bad coding.

<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>

To answer your other question:

Additionally is it possible to ambiguate getElementsByTagName("span")[0] to something like getElementsByTagName(theTagName)[theIndexNumber]?

getElementsByTagName() returns an array of elements. Hence you could use something like:

getElementsByTagName(theTagName)[theIndexNumber]

But ensure, the function call has returned atleast one element and the variables "theTagName" and "theIndexNumber" has right values.