Button Colour Change HTML

I know similar questions have been asked before, but it was not helpful in my case. I have tried a lot and have failed. I have an HTML code ,JS code , and php script . What’s happening now is that I have a button called “Lights On” in my html page. When i press the “Lights On” button it runs a Php script in the server to trigger a light connected to a device ( lets call it a lighting device). The button gets a green colour as soon as i press it. The JS code is there so that after I press the button and click anywhere else on the web page, the button still has a green colour. It is just to indicate that the button is active. Everything works fine until now.

ISSUE

The issue is that, when there is no internet connection established between my html page and the lighting device, the button behaves as i expect it to be. ie, when i press the button it has a green colour and when i press elsewhere on the webpage, the button doesn’t loose its colour. But as soon as the connection between my html page and the lighting device is successful by pressing the button, the button looses its colour . (NOTE: when the connection is established the page refreshes). Now I cannot see the green colour after the connection is made. There is the another button for light off as well in the same html page. But i didn’t want to add it because the code will become too large. I just want to know if there is a way that my button colour will remain the same even if my web page refreshes? Or is something i can do with my php script to give colour to my button as soon as it returns true? Thanks Heaps !! And thank you for your time !!

HTML code

<!DOCTYPE html>
<html lang="en">

<head>

  <style>
    .button {

      margin-top: 280px;

      margin-left: 420px;

      border: none;
      color: white;
      padding: 30px 35px;

    }

    .button:target {

      color: green;
      outline: none;
      -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
      -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
      box-shadow: inset 0px 0px 5px #c1c1c1;
    }

    button.selected {

      background-color: green;
    }
  </style>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-UA-Compatible" content="ie=edge">

<body>

  <form method="get" action="http://myserver.com/triggeron.php">
    <button class="button">Lights On</button>
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="myscript.js"></script>

Javascript (myscript.js)

$('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
});

PHP code (triggeron.php)

<?php

$response = @file_get_contents('http://1.1.1.1/cgi-bin/output?username=abcd&password=cdef&action=on&pin=relay');

if($response ==true){

    header("Location: index.html");

}

?>

Answer

One word: State.

Your HTML page doesn’t display the correct color of the button because you don’t maintain state between page refreshes. As it currently stands, even if you loaded the page when the light is already on, it would still not show you the green button.

The easiest fix is to maintain the state of the light in a cookie or local storage with JS, read this state on page load, and then display the appropriate color for the button.

// on clicking the button, do this:
localStorage.setItem('isLightOn', '1');

// and on page load, do this:
if (localStorage.getItem('isLightOn') === '1') {
  $('button').addClass('selected');
} else {
  $('button').removeClass('selected');
}

The disadvantage with this is that it doesn’t reflect the current state of the light according to the server.

To always show the correct state of the light in the page, you need a mechanism to query the current state of the light from your server. Then you can read the state from the server, and then display the appropriate HTML.

You can even put this in your index file. Call it index.php and use the same content from your index.html, with some PHP sprinkled in:

<?php
  # Let's assume this returns `true` when light is on, and `false` is it's off.
  $lightState = @file_get_contents('http://1.1.1.1/cgi-bin/output?username=abcd&password=cdef&action=read&pin=relay');
  if ($lightState == true):
?>
  <button class="button selected">Lights On</button>
<?php
  else:
?>
  <button class="button">Lights On</button>

I might be a bit rusty on the syntax, but that’s the general idea. Hope that helped!

ISSUE

Advertisement

Answer