Ich bin neu in JavaScript und probiere gerade einige Sachen aus. Wie auch immer, ich mache eine einfache Box, die die Farbe onclick einer Schaltfläche ändert. Antworte so einfach, aber ich kann es einfach nicht herausfinden. Hier ist der bisherige HTML-Code:

var btn = document.getElementById("btn");
var box = document.getElementById("box");

function changeColor() {
  box.style.backgroundColor = "red";
}

function ifColor() {
  if (box.style.backgroundColor == "red") {
    box.style.backgroundColor = "blue";
  }
}
#box {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 0.5px;
}
<div id="box"></div>
<button id="btn" onclick="changeColor(); ifColor();">
    Change box color
</button>

Wenn ich den Knopf drücke, wird er nur blau und wenn ich ihn erneut drücke, passiert nichts. Wenn ich die Funktion ifColor entferne, wird die Box durch die Schaltfläche nur rot.

0
AhmadBenos 22 Feb. 2020 im 02:27

4 Antworten

Beste Antwort

Sie können auch Folgendes tun:

var box = document.getElementById("box");

function changeColor() {
  if (box.classList.contains('red')) {
    box.classList.remove('red');
    box.classList.add('blue');
  } else {
    box.classList.remove('blue');
    box.classList.add('red');
  }
}
#box {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 0.5px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
<div id="box" class="red"></div>
<button id="btn" onclick="changeColor();">
    Change box color
</button>
0
ali.rezaie 21 Feb. 2020 im 23:58

Verwenden Sie einfach eine Funktion, mit der Sie die Farbe umschalten können.

var btn = document.getElementById("btn");
var box = document.getElementById("box");

function changeColor() {
  if (box.style.backgroundColor == "blue") {
    box.style.backgroundColor = "red";
  } else {
    box.style.backgroundColor = "blue";
  }
}
#box {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 0.5px;
}
<div id="box"></div>
<button id="btn" onclick="changeColor();">
    Change box color
</button>
1
Barmar 21 Feb. 2020 im 23:34

Versuchen Sie es so zu haben, wenn Sie auf die Schaltfläche klicken, ändert es die Farben zwischen Rot und Blau?

So wie Sie Ihren Code eingerichtet haben, wird er immer blau sein, weil:

function changeColor() {
  box.style.backgroundColor = "red";
}

function ifColor() {
  if (box.style.backgroundColor == "red") {
    box.style.backgroundColor = "blue";
  }
}

Sie rufen zuerst changeColor () auf. Dadurch wird die Schaltfläche rot und dann wird ifColor () ausgeführt, wodurch die Schaltfläche blau wird. Dies geschieht ziemlich augenblicklich.

Sie müssen nur Folgendes tun:

function changeColor() {
  if(box.style.backgroundColor === "red"){
      box.style.backgroundColor = "blue";
  } 
  else box.style.backgroundColor = "red";
}
0
alex067 21 Feb. 2020 im 23:37

Ihr Code funktioniert. Stellen Sie einfach eine Verzögerung von bestimmten Sekunden ein, um die Änderung anzuzeigen.

var btn = document.getElementById("btn");
var box = document.getElementById("box");

function changeColor() {
  box.style.backgroundColor = "red";
}

function ifColor() {
setTimeout(()=>{
 if (box.style.backgroundColor == "red") {
    box.style.backgroundColor = "blue";
  }
},2000);
 
}
#box {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 0.5px;
}
<div id="box"></div>
<button id="btn" onclick="changeColor(); ifColor();">
    Change box color
</button>
0
Sunil Lama 21 Feb. 2020 im 23:33