Button that acts like toggle with JS functions

Question

How can I make a HTML button act like a toggle? I have two JS functions that modify an image, one to a new image and the other to change it back. How can I make sure a button activates the first function when pressed the first time but then activates the second when pressed again, repeated for the third and fourth time etc.

    document.getElementById("baseImg").src = "assets/1stImg.png";

    function imgChange1() {
      document.getElementById("baseImg").src = "assets/2ndImg.png";
    }
    function imgBack1() {
      document.getElementById("baseImg").src = "assets/1stImg.png";
    }

<img id="baseImg">

<button onclick="imgChange1()">Change</button>

How would I go about including the second function within this button?

`

Pure code-writing requests are off-topic on Stack Overflow -- we expect questions here to relate to *specific* programming problems -- but we will happily help you write it yourself! Tell us [what you've tried](https://stackoverflow.com/help/how-to-ask), and where you are stuck. This will also help us answer your question better. — glennsl, Sep 24 '17 at 14:08
Similar question (most answers use jQuery though): https://stackoverflow.com/questions/309081/how-do-you-create-a-toggle-button — Nisarg Shah, Sep 24 '17 at 14:15
Code has been added. I was looking for a HTML/JS solution if possible. — Alex, Sep 24 '17 at 14:27

score 2 · Accepted Answer · answered Sep 24 '17 at 15:06

I don't really get your question because you were saying "toggle" but you were saying

How can I make sure a button activates the first function when pressed the first time but then activates the second when pressed again?

But well, here's how you do it:

var clicked = false;

function toggleBtnClick(button) {
  var img = document.getElementById('baseImg');

  if (clicked) { //this will be executed on future clicks after first click
    img.src = 'http://via.placeholder.com/350x150/4CAF50/000000';
    console.log('Next click');
    //or do something else
  } else { //this will only be executed once
    img.src = 'http://via.placeholder.com/350x150/e9e9e9/000000';
    console.log('First click');
  }
  clicked = true; //update to true after first click
}

button {
  position: absolute;
  right: 0;
}

<img id="baseImg" src="http://via.placeholder.com/350x150/3fafed/000000">
<button onclick="toggleBtnClick()">Change</button>

But, if you really want a "toggle" functionality, here's how you do it:

var clicked = false;

function toggleBtnClick() {
  var img = document.getElementById('baseImg');
  if (clicked) {
    img.src = 'http://via.placeholder.com/350x150/e9e9e9/000000';
    clicked = false;
  } else {
    img.src = 'http://via.placeholder.com/350x150/3fafed/000000';
    clicked = true;
  }
}

button {
  position: absolute;
  right: 0
}

<img id="baseImg" src="http://via.placeholder.com/350x150/e9e9e9/000000">

<button onclick="toggleBtnClick()">Change</button>

The latter was exactly what I meant, sorry. And it works great, a lot more efficient than my attempt. Thank you. ALSO: Is it a flaw that it does not change on the first click, or do you think that's down to the delay of loading a large image? — Alex, Sep 24 '17 at 15:27
if the image loads after some time, it must be caused by *delay of loading a large image*. else, there must be something wrong, somewhere. — xGeo, Sep 24 '17 at 15:38
It appears to be the image, which only loads in when the button is pressed. Trying with the placeholder links you used worked as intended. I will look into preloading the two images. — Alex, Sep 24 '17 at 15:55

Button that acts like toggle with JS functions

1 Answers1