innerHTML with getElementByClassName doesn't work

Question

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.

Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Heretic Monkey, Nov 12 '18 at 20:02

score 10 · Answer 1 · edited May 23 '17 at 12:01

10

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.

edited May 23 '17 at 12:01

Community

1
1

answered Aug 28 '13 at 06:44

Denys Séguret

372,613
87
782
758

Still doesn't work in my code. I updated the original question. It works in Chrome, Firefox etc but not IE8. `getElementById` works in IE8 but not `getElementsByClassName`, why? – Treps Aug 28 '13 at 06:54
1

Why ? The answer is in the link I gave : this function doesn't exist on IE8. – Denys Séguret Aug 28 '13 at 07:01
Aah, sorry. Didn't read the support-table first. How can I get this to work in IE8? Thx for helping me. :) – Treps Aug 28 '13 at 07:02

2hamed · Answer 2 · 2013-08-28T06:50:41.033

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

edited Aug 28 '13 at 06:50

answered Aug 28 '13 at 06:44

2hamed

8,719
13
69
112

naor · Answer 3 · 2013-08-28T08:04:12.693

1

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

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

edited Aug 28 '13 at 08:04

answered Aug 28 '13 at 06:51

naor

3,460
3
18
13

$("#textbox").html("Hidden text") is use for getting an object with reference ID not for class . for class you should use like this $(".textbox").html("Hidden text") – Shashank Shukla Aug 28 '13 at 07:13
@ShashankShukla You're right, I edited the answer and added class selector vs. id selector. Thanks. – naor Aug 28 '13 at 08:05

score 0 · Answer 4 · answered Aug 28 '13 at 06:44

0

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

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

answered Aug 28 '13 at 06:44

Mihai Matei

24,166
5
32
50

Krasimir · Answer 5 · 2013-08-28T06:57:50.457

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

Does it works in IE8? I need something to work in IE8 and other (newer) browsers. — Treps, Aug 28 '13 at 07:01
I'm not able to test it right now, but the most critical part is querySelectorAll, which is supported by IE8 -> http://caniuse.com/queryselector So, it should work. It is supported in all the browsers nowadays. — Krasimir, Aug 28 '13 at 07:02
This one doesn't work in IE8. Tested it right now via jsfiddle iFrame. — Treps, Aug 28 '13 at 18:18

score 0 · Answer 6 · answered Aug 28 '13 at 06:49

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    
}

innerHTML with getElementByClassName doesn't work

6 Answers6

Linked

Related