Question 168469 in Html Question posted in
Some basic documentation can be found here.

Can an HTML button unlock a JavaScript door req?

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    Use a data attribute on a button

    <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
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search