I try to create a simple traffic light system for a project however once i use the onclick="maakGroen();maakRood();"> the 2nd function does not work....
This is my code
<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";
}
Use setTimeout() to delay the second function so you can see the first function's change.
<input type="button" name="Licht" value="Licht" onclick="maakGroen();setTimeout(maakRood, 1000);">
You can create a third function with both functions in it and use a timeout just like @Barmar said.
Try using an event listeners, in the example below, you can replace querySelector with getElementByID; more info on the developer site or you can find tutorials on w3schools
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.
document.querySelector(".elementname").addEventListener("click", doStuff)
function doStuff() {
maakGroen();
maakRood();
}
If you don't like this, then you can simply make a new function with all the code from maakGroen();maakRood(); pasted into it.