英文:
How to fulfill a JavaScript door unlock requirement using an HTML button?
问题
In this tutorial, you want to replace the checkbox with a button to control a door lock. Here's the modified code with the button:
<!DOCTYPE html>
<html>
<body>
<h1>Control Door Lock</h1>
<p><input type="button" id="lock" value="Lock/Unlock"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.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 lockButton = document.getElementById("lock");
var doorLocked = true; // Default position is locked
lockButton.addEventListener("mousedown", function() { // add event listener for mouse button press
doorLocked = false; // Unlock the door when the button is pressed
socket.emit("lock", doorLocked); // send door status to server (as true or false)
});
lockButton.addEventListener("mouseup", function() { // add event listener for mouse button release
doorLocked = true; // Lock the door when the button is released
socket.emit("lock", doorLocked); // send door status to server (as true or false)
});
socket.on("lock", function(data) { // get door status from server
doorLocked = data; // change button state according to door status
});
// Handle initial state (you may want to fetch the initial state from the server)
lockButton.value = doorLocked ? "Locked" : "Unlocked";
});
</script>
</body>
</html>
This code replaces the checkbox with a button that toggles the door lock when pressed and released. The button initially displays "Locked" and changes to "Unlocked" when the door is unlocked, and vice versa.
英文:
In this this tutorial, https://www.w3schools.com/nodejs/nodejs_raspberrypi_webserver_websocket.asp , It has even handler that works off of an HTML checkbox. I would like to do the exact same thing, but with a button, so that I can temporarily unlock a door. As long as the button is pressed by the mouse, the door is unlocked. Once the mouse button is released, the door locks. The default position is locked. Below is the code from the link above:
<!DOCTYPE html>
<html>
<body>
<h1>Control LED light</h1>
<p><input type="checkbox" id="light"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.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>
Essentially, I would like to use
<input type="button" id="light" value="light">
instead of
<input type="checkbox" id="light">
Thank you!
答案1
得分: 1
Sure, here is the translated code part:
使用数据属性在按钮上：
<input type="button" id="light" value="light" data-checked="0">
<!-- 语言: lang-js -->
window.addEventListener("load", function(){ // 页面加载时
const lightButton = document.getElementById("light");
lightButton.addEventListener("mousedown", function() { // 添加事件监听器以响应复选框更改
socket.emit("light", Number(this.dataset.checked)); // 将按钮状态发送到服务器（作为1或0）
});
});
socket.on('light', function (data) { // 从客户端获取按钮状态
lightButton.dataset.checked = data; // 根据树莓派上的推按钮更改复选框
socket.emit("light", data); // 将推按钮状态发送回服务器
});
<!-- 结束片段 -->
Please note that I've provided the translation for the code part as requested.
英文:
Use a data attribute on a button
<input type="button" id="light" value="light" data-checked="0">
<!-- language: lang-js -->
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
});
<!-- end snippet -->
答案2
得分: 1
为了使代码按我想要的方式正常工作，我进行了以下操作：
<input type="button" id="light" value="light" data-checked="1" data-unchecked="0">
然后我添加了以下JavaScript代码：
var socket = io();
window.addEventListener("load", function() { //页面加载时
const lightButton = document.getElementById("light");
lightButton.addEventListener("mousedown", function() { //添加事件监听器以侦听复选框更改
socket.emit("light", Number(this.dataset.checked)); //将按钮状态发送到服务器（作为1或0）
});
lightButton.addEventListener("mouseup", function() { //添加事件监听器以侦听复选框更改
socket.emit("light", Number(this.dataset.unchecked)); //将按钮状态发送到服务器（作为1或0）
});
});
socket.on('light', function(data) { //从客户端获取按钮状态
lightButton.dataset.checked = data; //根据树莓派上的按钮更改复选框
socket.emit("light", data); //将按钮状态发送回服务器
});
@mplungjan，再次感谢您！
英文:
To get the code to work exactly the way I wanted it, I did the following;
<input type="button" id="light" value="light" data-checked="1" data-unchecked="0">
And I added the following JavaScript:
var socket = io();
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)
});
const lightButton = document.getElementById("light");
lightButton.addEventListener("mouseup", function() { //add event listener for when checkbox changes
socket.emit("light", Number(this.dataset.unchecked)); //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
});
@mplungjan Thanks again!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论