How to change HTML content multiple times with one button using JS (no JQuery)?

Question

I have the following piece of code, which changes one line of text in a click of a button:

<!DOCTYPE html>
<html>
<body>

<h1>Change content exercise</h1>

<p id="demo">Watch this HTML content changes..</p>

<button type="button"
onclick="document.getElementById('demo').innerHTML = 'This is JavaScript!'">
Click Me!</button>

</body>
</html>

This is quite easy since there is no script, no function needed to handle the button. Now, I want this same button to change back to the first content when I click it again. I assume that now I need to have a function, but not sure how to write it. An ideas?

Andrew Mairose · Accepted Answer · 2015-12-15 17:28:22Z

2

You don't have to use a function. You could do it with a ternary operator ? and :, or you could even just write an if else statement all on one line.

<h1>Change content exercise</h1>

<p id="demo">Watch this HTML content changes..</p>

<button type="button"
onclick="document.getElementById('demo').innerHTML === 'This is JavaScript!' ? document.getElementById('demo').innerHTML = 'Watch this HTML content changes..' : document.getElementById('demo').innerHTML = 'This is JavaScript!';">
Click Me!</button>

However, that is a lot of code to cram into one line and it would be much cleaner in a separate function, as such.

function changeText() {
  var demo = document.getElementById('demo');
  if (demo.innerHTML === 'This is JavaScript!') {
    demo.innerHTML = 'Watch this HTML content changes..';
  } else {
    demo.innerHTML = 'This is JavaScript!';
  }
}

<h1>Change content exercise</h1>

<p id="demo">Watch this HTML content changes..</p>

<button type="button" onclick="changeText()">Click Me!</button>

edited Dec 15, 2015 at 17:28

answered Dec 15, 2015 at 17:21

Andrew Mairose

11.1k15 gold badges62 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Octav Zlatior Over a year ago

I would always use a function, it makes things clearer. Actually, I would not use the onclick attribute at all, to have JS and HTML separated nicely.

CapeStar · Accepted Answer · 2015-12-15 17:20:04Z

2

Well. Although the way you are trying is not the best practice.... But the following way will give you some hope. try to do more research.

function myFunction() {
    var x=document.getElementById("demo").innerHTML;
if(x=="A Paragraph."){
document.getElementById("demo").innerHTML="Back Again";}

if(x=="Back Again")
document.getElementById("demo").innerHTML="A Paragraph.";

}

   

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

answered Dec 15, 2015 at 17:20

CapeStar

1479 bronze badges

Comments

ak_ · Accepted Answer · 2015-12-15 17:19:47Z

1

More simply, this function works:

<h1>Change content exercise</h1>

<p id="demo">Watch this HTML content changes..</p>

<button type="button" onclick="changeText()">Click Me!</button>

Javascript:

function changeText() {
    e = document.getElementById('demo');
    e.innerHTML = e.innerHTML == "Watch this HTML content changes.." ? "This is JavaScript!" : "Watch this HTML content changes..";
}

You can see it working at this JS Fiddle: http://jsfiddle.net/0yLb4a3j/

answered Dec 15, 2015 at 17:19

ak_

2,8153 gold badges18 silver badges28 bronze badges

Comments

Octav Zlatior · Accepted Answer · 2015-12-15 17:23:10Z

1

You can have something like a toggle function:

<script type="text/javascript">
    function toggleContent() {
        var message1 = "This is JavaScript!";
        var message2 = "Watch this HTML content changes..";
        var element = document.getElementById('demo');

        if (element.innerHTML===message1)
            element.innerHTML = message2;
        else
            element.innerHTML = message1;

        return false;
    }
</script>

You get it called by setting onclick="toggleContent();" on the button.

answered Dec 15, 2015 at 17:23

Octav Zlatior

4514 silver badges14 bronze badges

Comments

user4639281 · Accepted Answer · 2015-12-15 23:40:59Z

1

You could use an IIFE, an array, an incremented counter, and a modulo operator to achieve this.

document.getElementById('button').onclick = (function(){
    var demo = document.getElementById('demo');
    var text = [demo.textContent,'This is JavaScript!'];
    var count = 0;
    return function() {
        demo.textContent = text[++count % 2];
    }
})();

<p id="demo">Watch this HTML content changes..</p>
<button type="button" id="button">Click Me!</button>

answered Dec 15, 2015 at 23:40

user4639281

Comments

erdysson · Accepted Answer · 2015-12-15 17:22:41Z

0

var btn = document.getElementById("<btn_id>");
var previous = "";

btn.addEventListener("click", clickHandler);

function clickHandler() {
  var demo = document.getElementById("demo");
  if (!previous) {
    previous = demo.innerHTML;
  } else {
    demo.innerHTML = "This is JS";
    btn.removeEventListener("click", clickHandler);
  }
}

answered Dec 15, 2015 at 17:22

erdysson

1,49013 silver badges18 bronze badges

Comments

Akram Saouri · Accepted Answer · 2015-12-15 17:18:34Z

-1

first of all , you ll need to do the code in a seperate script, in brief , append the intial text to the div then wheck button clicked, change it to second text, and according to your question you ll need a second button who will change the div text to the intial text , logically that ll give something like tht :

<script> 
window.onload = function(){
document.getElementById('demo').innerHTML = 'Watch this HTML content changes..'
}
document.getElementById('button1').Onclick = function(){
document.getElementById('demo').innerHTML = 'This is JavaScript!'
};
document.getElementById('button1').Onclick = function(){
document.getElementById('demo').innerHTML = ''Watch this HTML content changes..'
};

</script>

answered Dec 15, 2015 at 17:18

Akram Saouri

1,1598 silver badges15 bronze badges

3 Comments

takendarkk Over a year ago

OP wants to do it with only 1 button.

ak_ Over a year ago

Also, typo at ''Watch this html content changes...' Quote isnt properly wrapped.

Akram Saouri Over a year ago

Oups ..my bad , didn't understand the question at first, gimme one minute

Collectives™ on Stack Overflow

How to change HTML content multiple times with one button using JS (no JQuery)?

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related