innerHTML with getElementByClassName doesn't w

问题:

This one works:

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

But this one doesn't:

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

How can I fix this? I need a class to use it more than once.

回答1:

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.

回答2:

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';
}

回答3:

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

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

回答4:

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

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

回答5:

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    
}

回答6:

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