如何使用 HTML 按钮实现 JavaScript 门解锁要求？"/>
如何使用 HTML 按钮实现 JavaScript 门解锁要求？
在本教程中，.asp，它甚至具有处理 HTML 复选框的处理程序。我想做同样的事情，但有一个按钮，这样我就可以暂时打开一扇门。只要用鼠标按下按钮，门就会解锁。一旦松开鼠标按钮，门就会锁上。默认位置是锁定的。以下是上面链接中的代码：
<!DOCTYPE html>
<html>
<body>
<h1>Control LED light</h1>
<p><input type="checkbox" id="light"></p>
<script src=".io/2.0.3/socket.io.js"></script> <!-- include socket.io client side script -->
<script>
var socket = io(); //load socket.io-client and connect to the host that serves the page
window.addEventListener("load", function(){ //when page loads
var lightbox = document.getElementById("light");
lightbox.addEventListener("change", function() { //add event listener for when checkbox changes
socket.emit("light", Number(this.checked)); //send button status to server (as 1 or 0)
});
});
socket.on('light', function (data) { //get button status from client
document.getElementById("light").checked = data; //change checkbox according to push button on Raspberry Pi
socket.emit("light", data); //send push button status to back to server
});
</script>
</body>
</html>
本质上，我想用
<input type="button" id="light" value="light">
代替
<input type="checkbox" id="light">
谢谢！
回答如下：在按钮上使用数据属性
<input type="button" id="light" value="light" data-checked="0">
window.addEventListener("load", function(){ //when page loads
const lightButton = document.getElementById("light");
lightButton.addEventListener("mousedown", function() { //add event listener for when checkbox changes
socket.emit("light", Number(this.dataset.checked)); //send button status to server (as 1 or 0)
});
});
socket.on('light', function (data) { //get button status from client
lightButton.dataset.checked = data; //change checkbox according to push button on Raspberry Pi
socket.emit("light", data); //send push button status to back to server
});
更多推荐
如何使用 HTML 按钮实现 JavaScript 门解锁要求？
发布评论