innerHTML with getElementByClassName doesn't work

Question

This one works:

Answer 1

What if you use document.querySelector:

<td onmouseover="document.querySelector('.textbox').innerHTML='Hidden text'" onmouseout="document.querySelector('.textbox').innerHTML='Show text'">
    <div class="textbox">Show text</div>
</td>

This one works I think.

There is something else that you should have in mind. Adding such things inside your html is not really good idea. That's because every time you are executing something. It will be good to cache the result of document.querySelector or document.getElementsByClassName. Imagine what will happen if you have 1000 rows inside your table. Here is a jsfiddle showing how you can improve the performance of the code http://jsfiddle.net/krasimir/Zbgng/2/

HTML

<table><tr>
<td class="table-column">
    column1
</td>
<td class="table-column">
    column2
</td>
<td class="table-column">
    column3
</td>
</tr></table>

<div class="textbox">Show text</div>
<div class="textbox">Show text</div>
<div class="textbox">Show text</div>

JS

var columns = document.querySelectorAll(".table-column");
var textboxes = document.querySelectorAll(".textbox");
for(var i=0; column=columns[i]; i++) {
    column.addEventListener("mouseover", function() {
        replaceText("Hidden text");
    });
    column.addEventListener("mouseout", function() {
        replaceText("Show text");
    });
}
var replaceText = function(str) {
    for(var i=0; field=textboxes[i]; i++) {
        field.innerHTML = str;
    }
}

Answer 2

document.getElementByClassName('whatever') returns array of html object elements inside the document,

so you need

var ele = document.getElementsByClassName('textbox');

ele[0].innerHTML = "Whatever text" ;

If you want to set inner html to all the elements of this class you can use

for(var i=0;i<ele.length;i++)
{
  ele[i].innerHTML = "we all are of same class";
  // or you can dynamically insert different text too    
}

Answer 3

It's getElementsByClassName. Note the plural s after Element.

And since it's an array you need to specify the index number.

document.getElementsByClassName('class-name')[0].innerHTML = 'html text'

And if you need to apply the change for every element, use a for loop.

for(i in document.getElementsByClassName('class-name')){
    document.getElementsByClassName('class-name')[i].innerHTML = 'html text';
}

Answer 4

That's because getElementsByClassName is returning an array of elements. You can try

document.getElementsByClassName('textbox')[0].innerHTML='Hidden text'

Answer 5

There's no getElementByClassName function but a getElementsByClassName one because there can be more than one element with a given class.

You could replace

 document.getElementByClassName('textbox')

with

 document.getElementsByClassName('textbox')[0]

EDIT following the edit of your question :

This function isn't available on IE8. If you want to use it on this browser, you must add a shim, such the one which is described in this question.

Answer 6

If you can use jQuery, it's simpler using .html():

$("#textbox").html("Hidden text") // id=textbox
$(".textbox").html("Hidden text") // class=textbox