Question

我正在尝试使用html中的滑块切换值，这是我所做的： html文件：

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script scr="./scripts.js" type="text/javascript"></script>
</head>
<body style="font-family: Calibri; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 26.4px;">
<div id="myDIV">Hello</div>

        <h2> Testing switch:
                <label class="switch">
                  <input id="status" type="checkbox" checked>
                  <span class="slider round" ></span>
              </h2>


</body>

，这里是我正在使用的scripts.js代码：

function myFunction() {
  var x = document.getElementById("myDIV");
  var isChecked = document.getElementById("status");
  if (isChecked.checked ==true) {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}

我没有得到我想要的东西，但是移动幻灯片不会改变文本！知道我该如何解决吗？提前致谢！

更新

滑块基于w3-schools Example

Answer 1

您需要以某种方式触发您的功能。它不会自动运行。下面的示例通过在复选框使用myFunction属性更改值时运行onChange来解决此问题。

function myFunction() {
  var x = document.getElementById("myDIV");
  var isChecked = document.getElementById("status");
  if (isChecked.checked == true) {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./layout.css">
  <script scr="./scripts.js" type="text/javascript"></script>
</head>

<body style="font-family: Calibri; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 26.4px;">
  <div id="myDIV">Hello</div>
  <h2> Testing switch:
    <label class="switch">
    <input id="status" type="checkbox" checked onChange="myFunction(this)">
    <span class="slider round" ></span>
  </h2>
</body>

Answer 2

当您按下开关时，什么都没有发生，因为您尚未对其进行任何操作。您可以通过绑定onchange函数来添加一个：

function myFunction() {
  var x = document.getElementById("myDIV");
  var isChecked = document.getElementById("status");
  if (isChecked.checked == true) {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}

body {
  font-family: Calibri;
  font-size: 24px;
  font-style: normal;
  font-variant: normal;
  font-weight: 100;
  line-height: 26.4px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<body>
  <div id="myDIV">Hello</div>

  <h2> Testing switch: </h2>
  <label class="switch">
  <input id="status" type="checkbox" onChange="myFunction(this)" checked>
  <span class="slider round"></span>
  </label>
</body>

Answer 3

在脚本中添加以下行将使用户输入触发您的功能。

document.getElementById("status").addEventListener("change", myFunction});

Answer 4

作为建议的正确解决方案的替代方法，这种方法不必每次复选框更改时都获取元素。

const x = document.getElementById("myDIV");
const checkbox = document.getElementById("status")

checkbox.addEventListener("click", (el) => {
	el.target.checked
    ? x.innerHTML = "Swapped text!"
    : x.innerHTML = "Hello";
})

<div id="myDIV">Hello</div>

<h2> Testing switch:
  <label class="switch" />
  <input id="status" type="checkbox">
  <span class="slider round" ></span>
</h2>

如何使用切换滑块js

4 个答案: