Why won't innerHTML work for me?

Question

This function uses jQuery to modify the contents of a DOM element. What am I doing wrong?

function updateScore() {
    alert("Test score is: " + bucket.score);
    $("#testScore").innerHTML = 'Current score is: + bucket.score';
}

The alert runs, but nothing else does. I have a <p> with the id testScore, but it doesn't change when I run the function. Why?

Thanks, Elliot Bonneville

score 10 · Accepted Answer · edited May 23 '17 at 12:06

10

Try .html() on a jQuery object. innerHTML is for DOM-Elements.

$("#testScore").html('Current score is: '+ bucket.score);

If, for some reason, you really want to use innerHTML, you can convert the jQuery Object back to its DOM variant, for example using [0] or .get(0). Call like this, then:

$("#testScore")[0].innerHTML ='Current score is: '+ bucket.score

But I don't see why you would want to do that - since you're already writing in jQuery, there's no need to fallback to DOM methods that have a perfectly fine jQuery equivalent.

edited May 23 '17 at 12:06

Community

1
1

answered Nov 14 '10 at 22:00

Konerak

39,272
12
98
118

you can also get the html element itself with `[0]`. so `$("#testScore")[0].innerHTML = '...'; – Jehiah Nov 14 '10 at 22:03
2

You'll need to put bucket.score out of the string (move the single quote `'` to the left) to have it evaluated. – Konerak Nov 14 '10 at 22:04
The `[0]` part could be written as `$('#testScore').get(0)`, too. – jwueller Nov 14 '10 at 22:16

score 2 · Answer 2 · answered Nov 14 '10 at 22:01

2

function updateScore() {
    alert("Test score is: " + bucket.score);
    $("#testScore").text('Current score is: ' + bucket.score);
}

answered Nov 14 '10 at 22:01

aefxx

24,835
6
45
55

score 0 · Answer 3 · answered Nov 14 '10 at 22:00

0

try

$("#testScore").innerHTML('Current score is: + bucket.score');

The jQuery objects do not support assignment to the attributes. (Its a Javascript limitation) You have to call the function with a parameter to set something.

answered Nov 14 '10 at 22:00

Winston Ewert

44,070
10
68
83

Nope, didn't work. You can see my page and view the source if you need to here: http://elliot.bonblogs.com/quiz/#quiz – Elliot Bonneville Nov 14 '10 at 22:02
It's not `innerHTML()`, it's `html()`. – BoltClock Nov 14 '10 at 22:03
A JavaScript limitation? This does not make sense to me. – jwueller Nov 14 '10 at 22:10
@elusive, its a JavaScript limitation because they couldn't override the meaning of obj.innerHTML = X to do something special. – Winston Ewert Nov 14 '10 at 22:19
@Winston Ewert: I do not think that they did it like they did because of non-existing magic properties in JavaScript. `.html()` simply fits much better in the jQuery schema. It is chainable. – jwueller Nov 14 '10 at 22:26

Why won't innerHTML work for me?

3 Answers3