Change innerHTML on button click

I'm learning Javascript, and I'm trying to change the text of an 'id' when the user clicks a button. Here's the code:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById("demo").innerHTML = "Hey There"">Try it</button>

</body>
</html>

When I select the button, nothing happens. What am I doing wrong, and how can I fix it?

Solution

My answer will possibly look complicated at first, but I do believe that starting with a good conception is healthy and will make things more enjoyable. A common problem with learning tools actually is that they promote themselves as "QUICK" ways of learning something. There is some good you can get from them, but there is some caveats. It can be harder to learn if you skip too many steps.

HTML is by design used to describe the presentation of the page, while JavaScript is by design used to interact with that page.

Inline JavaScript is a bad practice and will often lead to issues like the one you're facing. Inline here means that you directly put interactive code inside the HTML presentation. If you do that, you will quickly find that this part of HTML becomes messy. Then, it will look hard to deal visually with delimiters since there is >, " and ' all at the same place.

Another problem with inline javascript is that it mixes two concepts: interaction and presentation. HTML should be only used for presentation.

In that way, you could edit your code to make it look like this:

HTML

<!DOCTYPE html>
<html>
<body>

    <p id="demo">Hello</p>
    <button id="btn" type="button">Try it</button>

    <script>
        document.getElementById('btn').onclick = function() {
            document.getElementById('demo').innerHTML = 'Hey There';
        }
    </script>
</body>
</html>

What it does is when the document loads, it will interactively associate an action to your button if JavaScript is enabled in the user's browser. If it's not, the page won't fail at all, it will be downgraded. In that sample, the presentation (html) is totally separated from the interaction (script). As a bonus, there is no more f*cks with double or single quotes.

For the script part, I personnally like to work it a little bit more so it is easier to use and read.

Something like this:

JavaScript

_e('btn').onclick = function() {
    _e('demo').innerHTML = 'Hey There';
}

function _e(id) {
   return document.getElementById(id);
}

Or even better:

JavaScript

_e('btn').addEventListener('click', function() {
    _e('demo').innerHTML = 'Hey There';
}, false);

function _e(id) {
   return document.getElementById(id);
}

The last version will explicitly state your intention to do something when you click on your button. This actually makes it really clear what you intend to do with your button.

I hope this helps and good luck :)