通過if/else陳述句使用JavaScript事件偵聽器更改CSS屬性-有解無憂

我可能設定錯了，但是我在 JS 中設定了一個按鈕，可以通過它們共享的類更改所有元素的顏色。他們沒有 onClick 或任何只是一個類的東西。我正在嘗試使用 if/else 陳述句來回圈瀏覽不同的顏色主題。考慮到這是我第一次在我的專案中使用 JS（并且有史以來），事實證明這是一個相當大的挑戰。我在 body 元素的底部有 script 標簽，并三重檢查了我的按鈕 ID 名稱。如果它不能以我希望的方式作業，我希望早點知道 lmao。邊框和背面的其他變數也是我打算更改的顏色。

const themeColor = document.getElementById("theme-click-home");
const allColor = document.querySelectorAll(".theme-change");
const allBorder = document.querySelectorAll(".theme-border");
const allback = document.querySelectorAll(".theme-back");
themeColor.addEventListener("click", (e) => {
  let count = 0;
  count  ;
  if (count === 6) {
    count = 0;
  } else if (count === 1) {
    allColor.style.setProperty("color", "red", "!important");
  } else if (count === 2) {
    allColor.style.setProperty("color", "red", "!important");
  } else if (count === 3) {
    allColor.style.setProperty("color", "red", "!important");
  } else if (count === 4) {
    allColor.style.setProperty("color", "red", "!important");
  } else if (count === 5) {
    allColor.style.setProperty("color", "red", "!important");
  }
});

uj5u.com熱心網友回復：

我不明白增加計數變數的邏輯，但無論如何你應該將它移到函式閉包之外。

你可以這樣做：

const themeColor = document.getElementById('theme-click-home')
const allColor = document.querySelectorAll('.theme-change')
const allBorder = document.querySelectorAll('.theme-border')
const allback = document.querySelectorAll('.theme-back')
let count = 0

themeColor.addEventListener('click', e => {
  count  
  if (count >= 6) {
    count = 0
    return
  }

  allColor.forEach(elem => {
    elem.style.color = 'red'
  })
})

uj5u.com熱心網友回復：

@yadejo 我無法發表評論，因為我沒有 50 個聲望你也可以添加 html。會有所幫助

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

標籤：javascript html css

上一篇：是否可以單獨按鍵查詢貓鼬地圖中的元素

下一篇：十進制的正則運算式模式匹配