Menu
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 ();
438
Example If statement: When the user clicks any of the radio buttons, we use the onclick event handler to call the analyzeColor1() function. When we call that function, we pass in the value of the radio button (using this. value ). The function then takes that value and performs an if statement on it.
event: Event can be any valid JavaScript event. Events are used without the “on” prefix like use “click” instead of “onclick” or “mousedown” instead of “onmousedown”. listener(handler function): It can be a JavaScript function that responds to the event that occurs.
Yes, you can call two JS Function on one onClick. Use semicolon (';') between both the functions. Thank you!
JavaScript onclick function only works once (very simple code)
You should use onclick method because the function run once when the page is loaded and no button will be clicked then
So you have to add an even which run every time the user press any key to add the changes to the div background
So the function should be something like this
htmlelement.onclick() = function(){
//Do the changes
}
So your code has to look something like this :
var box = document.getElementById("box");
var yes = document.getElementById("yes");
var no = document.getElementById("no");
yes.onclick = function(){
box.style.backgroundColor = "red";
}
no.onclick = function(){
box.style.backgroundColor = "green";
}
This is meaning that when #yes button is clicked the color of the div is red and when the #no button is clicked the background is green
Here is a Jsfiddle
60
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');
document.getElementById('buttons').addEventListener('click', function(evt) {
var target = evt.target;
if (target.id === 'yes') {
box.style.backgroundColor = 'red';
} else if (target.id === 'no') {
box.style.backgroundColor = 'green';
} else {
box.style.backgroundColor = 'purple';
}
}, false);#box {
width: 200px;
height: 200px;
background-color: red;
}
#buttons {
margin-top: 50px;
}<div id='box'></div>
<div id='buttons'>
<button id='yes'>yes</button>
<button id='no'>no</button>
<p>Click one of the buttons above.</p>
</div>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) {
var box = document.getElementById("box");
if (elem.id == "no") {
box.style.backgroundColor = "red";
} else if (elem.id == "yes") {
box.style.backgroundColor = "green";
} else {
box.style.backgroundColor = "purple";
};
};<div id="box">dd</div>
<button id="yes" onclick="Choice(this);">yes</button>
<button id="no" onclick="Choice(this);">no</button>
<button id="other" onclick="Choice(this);">other</button>or event binding,
window.onload = function() {
var box = document.getElementById("box");
document.getElementById("yes").onclick = function() {
box.style.backgroundColor = "red";
}
document.getElementById("no").onclick = function() {
box.style.backgroundColor = "green";
}
}<div id="box">dd</div>
<button id="yes">yes</button>
<button id="no">no</button>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
