如何使用切换滑块js
我正在尝试使用 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";
}
}
我不明白我错过了什么，但移动幻灯片不会改变文本！知道我该如何解决这个问题吗？提前致谢 ！
翻阅古今2回答
-
呼唤远方
您需要以某种方式触发您的功能。它不会自动运行。下面的示例通过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>
随时随地看视频慕课网APP
相关分类
JavaScript