Question

我想比较这两个JavaScript代码。我的目标是使用javascript和复选框创建从颜色a到颜色b的可切换开关。在我的最终项目中，它将用于从白天切换到夜晚。我想知道为什么没有“ EventListener”的代码无法正常工作？我也想知道是否有更好的解决方案来附加新类或在类之间进行切换。

工作：

var sw = document.getElementById("sw");
var box1 = document.querySelector(".skatla1");
var box2 = document.querySelector(".skatla2");

function day() {
    box1.classList.remove("night");
    box2.classList.remove("night2");
}

function night() {
    box1.classList.add("night");
    box2.classList.add("night2");
}

sw.addEventListener('change', (event) => {
  if (event.target.checked) {
    day();
  } else {
    night();
  }
})

.box {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type="checkbox"] {
    width: 100px;
    height: 100px;
}

.day {
    background: lightgray;
}

.day2 {
    background: rgb(141, 141, 141);
}

.night {
    background: rgb(78, 78, 78);
}

.night2 {
    background: rgb(37, 37, 37);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day night</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="skatla1 box day night">
        <input id="sw" type="checkbox" name="switch" id="">

    </div>
    <div class="skatla2 box day2 night2">Box 2</div>
</body>
<script src="script.js"></script>
</html>

不起作用：

function day() {
    box1.classList.remove("night");
    box2.classList.remove("night2");
}

function night() {
    box1.classList.add("night");
    box2.classList.add("night2");
}

function stikalo() {
    if (sw.checked === true){
        day();
    } else {
        night();
    }
}

Answer 1

如果您希望代码在不带EventListener的情况下与stikalo（）函数一起使用，则必须将输入更改为：

<input id="sw" type="checkbox" name="switch" onclick="stikalo()">

带有复选框的Javascript事件（已选中，未选中）

1 个答案: