changing content of p element using innerHTML

Question

I have the following script:

var before = document.getElementById('before');    
if (switchElement.value == 'single'){
    for (var i=0; i < before.length; i++) {
        if (before[i].id == "before_label") {
            before[i].innerHTML = 'Image';
            break;
        }
    }
    after.style.display = 'none';   
} 

and the HTML looks like:

<div id="before">
    <p id="before_label"> Before Image: </p>
    <input type="file" name="before"  size="40">
    <input type="hidden" name="MAX_FILE_SIZE" value="10000000">
</div>

Was wondering why it didn't work and change the inner html to change?

Answer 1

To access the innerHTML of before_label, just access it directly:

document.getElementById('before_label').innerHTML = 'Image';