类似于切换 JS 功能的按钮

Question

如何使 HTML 按钮像一个切换按钮一样工作？我有两个修改图像的 JS 函数，一个是新图像，另一个是修改图像。如何确保按钮在第一次按下时激活第一个功能，然后在再次按下时激活第二个功能，重复第三次和第四次等。

    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>

如何在此按钮中包含第二个功能？

`

Answer 1

我真的不明白你的问题，因为你说的是​​“toggle”但你说的是

如何确保按钮在按下时激活第一个功能 第一次但再次按下时会激活第二次？

不过，你可以这样做：

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>

但是，如果您真的想要 “切换” 功能，您可以这样做：

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>