it-swarm.com.de

Einfach, wenn sonst Onclick dann?

  1. Wie mache ich es, wenn die Schaltfläche mit dem Ja-Button die Farbe ändert?
  2. Ist die Verwendung von .onclick die beste Option?
  3. Mache ich das optimal?

Vielen Dank.

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

Sie sollten die Methode onclick verwenden, da die Funktion beim Laden der Seite einmal ausgeführt wird und dann keine Schaltfläche angeklickt wird 

Sie müssen also ein Even hinzufügen, das jedes Mal ausgeführt wird, wenn der Benutzer eine beliebige Taste drückt, um die Änderungen zum Div-Hintergrund hinzuzufügen 

Die Funktion sollte also so aussehen 

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

Ihr Code muss also ungefähr so ​​aussehen:

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

Dies bedeutet, dass beim Klicken auf die Schaltfläche #y die Farbe des div rot ist und wenn auf die Schaltfläche #no geklickt wird, ist der Hintergrund grün 

Hier ist ein Jsfiddle

5
Maroxtn

Die bevorzugte moderne Methode ist die Verwendung von addEventListener entweder durch Hinzufügen des Ereignis-Listeners direkt zum Element oder zu einem übergeordneten Element der Elemente (delegiert). 

Ein Beispiel, das delegierte Ereignisse verwendet, könnte sein

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

Sie können jQuery wie verwenden

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

Außerdem ist jQuery einfach zu bedienen.

Sie können Änderungen an Farben usw. mit einfachem jQUery oder Javascript vornehmen.

2
user3738510

wenn Sie die Funktion zum Laden der Seite aufrufen, aber nicht für das Schaltflächenereignis, müssen Sie die Funktion onclick -Ereignis aufrufen. Sie können einen Event-Inline-Elementstil oder ein Event-Bining hinzufügen

 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>

oder Eventbindung,

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