我正在尝试使用 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 回答
呼唤远方
TA贡献1856条经验 获得超11个赞
您需要以某种方式触发您的功能。它不会自动运行。下面的示例通过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>
添加回答
举报
0/150
提交
取消