Question

I’m trying to set the value of an H2 element, but the value never changes. When I click on a letter (a, b, c, etc…) on my web page, I try to update the H2 value, like this:

function GetEntries(firstLetter) {
    $('#letterChosen').innerHTML = firstLetter;
}

And here is the H2 element.

<h2 id="letterChosen" class="results">Results</h2>

I’ve tried a few things, and the innerHTML property was my last attempt. Any idea what I’m doing wrong? Note, the parameter firstLetter actually has a value, so that isn’t the problem.

Answer 1

Try this:

document.getElementById('letterChosen').innerHTML = firstLetter;

Or better yet:

document.getElementById('letterChosen').firstChild.nodeValue = firstLetter;

---

By using jQuery’s $('#letterChosen'), you are getting a jQuery object, not the element itself. You can access the element by adding [0] on the end (so $('#letterChosen')[0]) but in this case it’s actually kinda stupid to use jQuery when there’s a perfectly good native method.