CODEWITHSUNDEEP
javascripthtmlcssif-statementonclick
Markus Hallcyon
Markus Hallcyon

Reputation: 371

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 ();

Upvotes: 9

Views: 217234

Answers (6)

Pranav Gotawala
Pranav Gotawala

Reputation: 1

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";
  }
  else {
          box.style.backgroundColor = "indigo";
        }
}
<div id="box">dd</div>
<button id="yes">yes</button>
<button id="no">no</button>

Upvotes: 0

Diego Fagundez
Diego Fagundez

Reputation: 1

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;
  }
}

Upvotes: 0

Xotic750
Xotic750

Reputation: 23482

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>

Upvotes: 7

user3738510
user3738510

Reputation:

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.

Upvotes: 2

Maroxtn
Maroxtn

Reputation: 693

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

Upvotes: 9

Girish
Girish

Reputation: 12127

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>

Upvotes: 2

Related Questions