CODEWITHSUNDEEP
javascript
Jessica
Jessica

Reputation: 9830

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?

Upvotes: 8

Views: 50352

Answers (6)

saifazom
saifazom

Reputation: 1

If you do want to use inline javascript inside the onclick tag of the button element, you should use single quotes for the string inside of the script, like this:

<h2 id="heading">What Can JavaScript Do?</h2>
<button type="button" onclick="document.getElementById('heading').innerHTML = 'hello'"> Click</button>

Upvotes: 0

Naeem Akhtar
Naeem Akhtar

Reputation: 1198

There are different ways you can achieve. Third one is modification of your code, however, I am not sure if that is recommended.

function changeText() {
  document.getElementById("demo").innerHTML = "Hey There";
}

document.getElementById("btn1").addEventListener("click", () => {
  document.getElementById("demo1").innerHTML = "Again, hey there!";
});
<p id="demo">Hello</p>
<button type="button" onclick="changeText()">Try it</button>
<hr />


<p id="demo1">Hello</p>
<button type="button" id="btn1">Try it</button>
<hr />



<p id="demo2">Hello, there!</p>
<button type="button" onclick="document.getElementById('demo2').innerHTML = 'Again, hey there!'">Try it, again!</button>
<hr />

Upvotes: 0

Frederik.L
Frederik.L

Reputation: 5620

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 :)

Upvotes: 8

aagjalpankaj
aagjalpankaj

Reputation: 1180

-You are using double quote inside double quote. So it results in breaking of string like this. onclick="document.getElementById(" its the first string and so on...

-Either you can use single quote inside double quote or double quote inside single quote.

here is the working code:

  1. First Approach(Using single quote inside double quote):

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

  1. Second Approach(Using double quote inside single quote):

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

More about single and double quotes Read this

Upvotes: 5

Edoardo L&#39;Astorina
Edoardo L&#39;Astorina

Reputation: 7285

It's always better to have JavaScript execute in a separate function. Instead of inlining JS in the onclick attribute, try this approach:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>
<button type="button" onclick="textChange()">Try it</button>

  <script>
    var textChange = function( ) {
      document.getElementById("demo").innerHTML = "Hey There";
    };
  </script>
</body>
</html>

That way, on top of the fact that your code is easier to read, you will avoid the double quote/single quote issue you had.

Upvotes: 1

Saar
Saar

Reputation: 2306

The problem is that you are breaking the string because of the quotes:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

notice I changed the double quotes to single quotes

Upvotes: 4

Related Questions