如何使 2 个函数 onclick 在 JS 中工作？

Question

我尝试为项目创建一个简单的交通信号灯系统，但是一旦我使用 onclick="maakGroen();maakRood();"> ，第二个功能就不起作用....

这是我的代码

<input type="button" name="Licht" value="Licht" onclick="maakGroen();maakRood();">

<script>
  var Licht = document.getElementById('Licht');
  function maakRood() {
    Licht.src = "stop1.png";
  }
  function maakGroen() {
    Licht.src = "stop2.png";
  }

Answer 1

使用setTimeout()延迟第二个函数，以便您可以看到第一个函数的变化。

<input type="button" name="Licht" value="Licht" onclick="maakGroen();setTimeout(maakRood, 1000);">

Answer 2

您可以创建第三个函数，其中包含两个函数，并像@Barmar 所说的那样使用超时。

Answer 3

尝试使用事件侦听器，在下面的示例中，您可以将 querySelector 替换为 getElementByID；在开发者网站上获得更多信息，或者您可以在 w3schools 上找到教程 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.

document.querySelector(".elementname").addEventListener("click", doStuff)

function doStuff() {
    maakGroen();
    maakRood(); 
}

如果您不喜欢这个，那么您可以简单地创建一个新函数，将 maakGroen();maakRood(); 中的所有代码粘贴到其中。

Answer 4

您在寻找类似的东西吗？
(你的问题真不清楚！)

const trafficLights = document.querySelectorAll('.traffic-light')  

trafficLights.forEach(Tl => Tl.addEventListener('click', permuteTLcolor ))

function permuteTLcolor()
  {
  if (this.classList.contains('red'))    { this.classList.replace('red','green');    return }
  if (this.classList.contains('green'))  { this.classList.replace('green','yellow'); return }
  if (this.classList.contains('yellow')) { this.classList.replace('yellow','red');   return }

  this.classList.add('red')
  }

.traffic-light {
  display       : inline-block;
  width         : 2.6em;
  height        : 8em;
  border-radius : .7em;
  background    : #1c1641;
  margin        : 1em;
  padding-top   : .3em;
  cursor        : pointer;
  }
.traffic-light:hover {
  background    : #372c69;
  }
span {
  display       : block;
  width         : 2em;
  height        : 2em;
  border-radius : 50%;
  margin        : .4em .3em;
  box-sizing    : border-box;
  border        : .2em #97b2cc42 solid;
  }
.traffic-light > span:nth-of-type(1) { background: #441111; }
.traffic-light > span:nth-of-type(2) { background: #36360d; }
.traffic-light > span:nth-of-type(3) { background: #0b270b; }

.traffic-light.red    > span:nth-of-type(1) { background: #fc1515; border: 0; }
.traffic-light.yellow > span:nth-of-type(2) { background: #f3f314; border: 0; }
.traffic-light.green  > span:nth-of-type(3) { background: #28e728; border: 0; }

<div class="traffic-light red">
  <span></span><span></span><span></span>
</div>
<div class="traffic-light green">
  <span></span><span></span><span></span>
</div>
<div class="traffic-light yellow">
  <span></span><span></span><span></span>
</div>
<div class="traffic-light red">
  <span></span><span></span><span></span>
</div>

如何使 2 个函数 onclick 在 JS 中工作？

How can I make 2 functions onclick work in JS?

javascript

onclick