Thanks.
html:
<body>
<div id="box"></div>
<button id="yes">yes</button>
<button id="no">no</button>
<script src="js/script.js"></script>
</body>
css:
#box {
width: 200px;
height: 200px;
background-color: red;
}
js:
function Choice () {
var box = document.getElementById("box");
var yes = document.getElementById("yes");
var no = document.getElementById("no");
if (yes.clicked == true) {
box.style.backgroundColor = "red";
} else if (no.clicked == true) {
box.style.backgroundColor = "green";
} else {
box.style.backgroundColor = "purple";
};
};
Choice ();
This question is related to
javascript
html
css
if-statement
onclick
you call function on page load time but not call on button event, you will need to call function onclick event, you may add event inline element style or event bining
function Choice(elem) {_x000D_
var box = document.getElementById("box");_x000D_
if (elem.id == "no") {_x000D_
box.style.backgroundColor = "red";_x000D_
} else if (elem.id == "yes") {_x000D_
box.style.backgroundColor = "green";_x000D_
} else {_x000D_
box.style.backgroundColor = "purple";_x000D_
};_x000D_
};<div id="box">dd</div>_x000D_
<button id="yes" onclick="Choice(this);">yes</button>_x000D_
<button id="no" onclick="Choice(this);">no</button>_x000D_
<button id="other" onclick="Choice(this);">other</button>or event binding,
window.onload = function() {_x000D_
var box = document.getElementById("box");_x000D_
document.getElementById("yes").onclick = function() {_x000D_
box.style.backgroundColor = "red";_x000D_
}_x000D_
document.getElementById("no").onclick = function() {_x000D_
box.style.backgroundColor = "green";_x000D_
}_x000D_
}<div id="box">dd</div>_x000D_
<button id="yes">yes</button>_x000D_
<button id="no">no</button>I did it that way and I like it better, but it can be optimized, right?
// Obtengo los botones y la caja de contenido
var home = document.getElementById("home");
var about = document.getElementById("about");
var service = document.getElementById("service");
var contact = document.getElementById("contact");
var content = document.querySelector("section");
function botonPress(e){
console.log(e.getAttribute("id"));
var screen = e.getAttribute("id");
switch(screen){
case "home":
// cambiar fondo
content.style.backgroundColor = 'black';
break;
case "about":
// cambiar fondo
content.style.backgroundColor = 'blue';
break;
case "service":
// cambiar fondo
content.style.backgroundColor = 'green';
break;
case "contact":
// cambiar fondo
content.style.backgroundColor = 'red';
break;
}
}
You may use jQuery in it like
$('#yesh').click(function(){
*****HERE GOES THE FUNCTION*****
});
Besides jQuery is easy to use.
You can make changes in colors etc using simple jQUery or Javascript.
The preferred modern method is to use addEventListener either by adding the event listener direct to the element or to a parent of the elements (delegated).
An example, using delegated events, might be
var box = document.getElementById('box');_x000D_
_x000D_
document.getElementById('buttons').addEventListener('click', function(evt) {_x000D_
var target = evt.target;_x000D_
if (target.id === 'yes') {_x000D_
box.style.backgroundColor = 'red';_x000D_
} else if (target.id === 'no') {_x000D_
box.style.backgroundColor = 'green';_x000D_
} else {_x000D_
box.style.backgroundColor = 'purple';_x000D_
}_x000D_
}, false);#box {_x000D_
width: 200px;_x000D_
height: 200px;_x000D_
background-color: red;_x000D_
}_x000D_
#buttons {_x000D_
margin-top: 50px;_x000D_
}<div id='box'></div>_x000D_
<div id='buttons'>_x000D_
<button id='yes'>yes</button>_x000D_
<button id='no'>no</button>_x000D_
<p>Click one of the buttons above.</p>_x000D_
</div>Source: Stackoverflow.com