Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple if else onclick then do?

  1. How do I make it so if yes button clicked change colour?
  2. Is using .onclick the best option for this?
  3. Am I doing it the optimal way?

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 ();
like image 438
Markus Hallcyon Avatar asked Jan 01 '15 14:01

Markus Hallcyon


People also ask

Can you put an if statement in Onclick?

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.

What is alternative for onclick?

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.

Can we have two Onclick?

Yes, you can call two JS Function on one onClick. Use semicolon (';') between both the functions. Thank you!

Does Onclick only work once?

JavaScript onclick function only works once (very simple code)


3 Answers

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

like image 60
Maroxtn Avatar answered Sep 19 '22 13:09

Maroxtn


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>
like image 39
Xotic750 Avatar answered Sep 19 '22 13:09

Xotic750


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>
like image 22
Girish Avatar answered Sep 19 '22 13:09

Girish