Heb nu twee rode buttons en als je op een button klikt moet ie groen worden en als je weer klikt weer terug naar rood.
Nu lukt het om de eerste button van kleur te veranderen, maar bij tweede button werkt het niet.
heeft iemand een idee?
Dit is de code:
Nu lukt het om de eerste button van kleur te veranderen, maar bij tweede button werkt het niet.
heeft iemand een idee?
Dit is de code:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
button {
height:40px;
width:160px;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:red;
color: yellow;
padding: 12px 15px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1 { background: red }
.button1:hover {
background-color: green;
}
</style>
</head>
<body onload="beginfase()" style="background-color:#E3CEF6;" >
<button id="bGeneral" onclick="showOrHide('General')" class="button1" name= "bGeneral" ><b>General</b></button>
<!-- Create extra space -->
<p><br></p>
<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide('Plates')" class="button1" name= "buttonP" ><b>Plates</b></button>
<script type="text/javascript">
var button = document.querySelector("button");
button.addEventListener("click", function() {
const curColour = button.style.backgroundColor;
if (curColour === 'red') {
button.style.backgroundColor = "green";
}
else {
button.style.backgroundColor = "red";
}
});
</script>
</body>
</html>
Commentaar staat ertussen.
