更改框Javascript的顏色-有解無憂

我有一個我正在努力解決的問題。我在 html/css 中制作了 3 個框并有一個 eventListener，因此當單擊一個框時，它會變為紅色。我想要做的是一旦所有的盒子都被染成紅色，就讓所有的盒子都變成綠色。這是我的嘗試：

var buttonOne = document.querySelector(".one");
var buttonTwo = document.querySelector(".two");
var buttonThree = document.querySelector(".three");

function makeBoxRed(event) {
  var boxClicked = event.target;
  boxClicked.style.backgroundColor = "red";
}

var boxes = document.querySelector(".boxes");
boxes.addEventListener("click", makeBoxRed);

if ((boxes.style.backgroundColor = "red")) {
  boxes.style.backgroundColor = "green";
}

div {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <section class="boxes">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </section>
</body>

</html>

uj5u.com熱心網友回復：

希望這可以解決您的問題。單擊所有三個框后，它們會從紅色變為綠色。這樣，只有框回應點擊事件，而不是容器物件。

const buttonOne = document.querySelector(".one");
const buttonTwo = document.querySelector(".two");
const buttonThree = document.querySelector(".three");
const boxes = document.querySelector(".boxes");

function makeBoxRed(event) {
  const boxClicked = event.target;
  boxClicked.style.backgroundColor = "red";
  
  // Check if all the boxes are red
  for (const box of boxes.children) {
    // If a box is NOT red, abort function
    if (box.style.backgroundColor !== 'red') return;
  }
  
  // All boxes are red, make them all green instead.
  for (const box of boxes.children) {
    box.style.backgroundColor = 'green'
  }
}

// Register the event separately for each box (so the parent object doesn't handle clicks)
for (const box of boxes.children) {
  box.addEventListener("click", makeBoxRed);
}

div {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

<section class="boxes">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</section>

uj5u.com熱心網友回復：

你的函式的問題是 if 陳述句只在腳本開始時運行一次，你應該把它放在事件監聽函式中

const buttonOne = document.querySelector(".one");
const buttonTwo = document.querySelector(".two");
const buttonThree = document.querySelector(".three");
const boxes = document.querySelector(".boxes");

function makeBoxRed(event) {
  const boxClicked = event.target;
  boxClicked.style.backgroundColor = "red";
  
  // Check if all the boxes are red
  for (const box of boxes.children) {
    // If a box is NOT red, abort function
    if (box.style.backgroundColor !== 'red') return;
  }
  
  // All boxes are red
  boxes.style.backgroundColor = 'green'
  alert('All boxes are red!')
}

for (const box of boxes.children) {
    // Assign event listener to each box
    box.addEventListener("click", makeBoxRed);
}

div {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

<section class="boxes">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</section>

uj5u.com熱心網友回復：

你想做這樣的事情嗎？你能更詳細地解釋一下你的目的嗎？檢查代碼，以便您更好地理解您的觀點，以及您應該如何設定層次結構。

var buttonOne = document.querySelector(".one");
var buttonTwo = document.querySelector(".two");
var buttonThree = document.querySelector(".three");

function makeBoxRed(event) {
    var boxClicked = event.target;
     if (boxClicked.style.backgroundColor != "red")
     {
      boxClicked.style.backgroundColor = "red";
     }
     if (buttonOne.style.backgroundColor == "red" && buttonTwo.style.backgroundColor == "red" && buttonThree.style.backgroundColor == "red")
     {
      buttonOne.style.backgroundColor = "green";
      buttonTwo.style.backgroundColor = "green";
      buttonThree.style.backgroundColor = "green";
     }
}
var boxes = document.querySelector(".boxes");
boxes.addEventListener("click", makeBoxRed);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <section class="boxes">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
    </section>
  </body>
</html>

uj5u.com熱心網友回復：

let box1 = document.getElementById("boxOne");
let box2 = document.getElementById("boxTwo");
let box3 = document.getElementById("boxThree");



box1.addEventListener("click", function(event) {
  box1.classList.remove("blue");
  box1.classList.add("red");
  CheckColors();
});
box2.addEventListener("click", function(event) {
  box2.classList.remove("blue");
  box2.classList.add("red");
  CheckColors();
});
box3.addEventListener("click", function(event) {
  box3.classList.remove("blue");
  box3.classList.add("red");
  CheckColors();
});

function CheckColors() {
  if (box1.classList.contains("red") && box2.classList.contains("red") && box3.classList.contains("red")) {
    box1.classList.remove("red");
    box2.classList.remove("red");
    box3.classList.remove("red");
    box1.classList.add("green");
    box2.classList.add("green");
    box3.classList.add("green");
  }

}

.holder {
  display: flex;
  flex-wrap: wrap;
}

.box {
  text-align: center;
  flex-basis: 33%;
  width: 50px;
  height: 50px;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

<div class="holder">
  <div id="boxOne" class="box blue">
    Box 1
  </div>
  <div id="boxTwo" class="box blue">
    Box 2
  </div>
  <div id="boxThree" class="box blue">
    Box 3
  </div>

</div>

這會起作用

uj5u.com熱心網友回復：

出于有用的原因，我在代碼中留下了注釋

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <section class="boxes">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
    </section>

    <script>
    //Its better to get the boxes directly and add event listener
    var boxes = document.getElementsByTagName('div');
    boxes.addEventListener('click',makeBoxRed);
    function makeBoxRed(e){
        if(e.target.style.backgroundColor === 'red') //Check if box is red
            e.target.style.backgroundColor = 'green'; //turn it green
        else
            e.target.style.backgroundColor = 'red'; //else turn it red
    }
    </script>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426161.html

標籤：javascript 功能 dom dom 事件

上一篇：需要點擊存檔按鈕兩次才能在JavaScript中更改主頁內容

下一篇：如何在點擊時顯示不同的文字？