web-dev-qa-db-fra.com

Simple si onclick sinon faire?

  1. Comment puis-je le faire alors si oui le bouton cliqué change de couleur?
  2. Est-ce que utiliser .onclick est la meilleure option pour cela?
  3. Est-ce que je le fais de manière optimale?

Merci.

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 ();
javascripthtmlcssif-statementonclick
4
Markus Hallcyon

Vous devez utiliser la méthode onclick car la fonction est exécutée une fois lorsque la page est chargée et aucun bouton ne sera cliqué ensuite. 

Donc, vous devez ajouter un même qui à chaque fois que l'utilisateur appuie sur une touche pour ajouter les modifications à l'arrière-plan div 

Donc, la fonction devrait être quelque chose comme ça 

htmlelement.onclick() = function(){
    //Do the changes 
}

Donc, votre code doit ressembler à quelque chose comme ça:

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

Cela signifie que lorsque le bouton #yes est cliqué, la couleur de la division est rouge et lorsque le bouton #no est cliqué, l'arrière-plan est vert. 

Voici un Jsfiddle

5
Maroxtn

La méthode moderne recommandée consiste à utiliser addEventListener en ajoutant l'écouteur d'événements directement à l'élément ou à un parent de ces éléments (délégué). 

Un exemple, utilisant des événements délégués, pourrait être

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>

3
Xotic750

Vous pouvez utiliser jQuery comme

$('#yesh').click(function(){
     *****HERE GOES THE FUNCTION*****
});

En plus, jQuery est facile à utiliser.

Vous pouvez modifier les couleurs, etc. à l'aide de jQUery ou Javascript.

2
user3738510

vous appelez une fonction au moment du chargement de la page mais n’appelez pas l’événement du bouton, vous devrez appeler la fonction onclick

 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>

ou liaison d'événement,

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>

1
Girish