This function uses jQuery to modify the contents of a DOM element. What am I doing wrong?
function updateScore(score) {
console.log("Test score is: " + score);
$("#testScore").innerHTML = 'Current score is:' + score;
}
updateScore(1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<p id="testScore">The log message shows up, but nothing else does. I have a <p> with the id testScore, but it doesn't change when I run the function. Why?
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.
[0]. so `$("#testScore")[0].innerHTML = '...';
' to the left) to have it evaluated.
[0] part could be written as $('#testScore').get(0), too.function updateScore() {
alert("Test score is: " + bucket.score);
$("#testScore").text('Current score is: ' + bucket.score);
}
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.
innerHTML(), it's html().
.html() simply fits much better in the jQuery schema. It is chainable.