Change background color of a button in javascript is not working

Question

I have created a button in a file index.php

.button_round {
  border: none;
  padding: 7px;
  display: block;
  margin: 20px 2px;
  border-radius: 50%;
  background-Color: red;
}

<button class="button_round" id="link_button"> </button>

I want to change the color of the button based on condition as below in linkcheck.php file.

<?php
    include ("config.php");
    include ("index.php");

    //get max timestamp 

    $sql_query = "SELECT MAX(time) AS max_time FROM table_data";
    $execute_query = $conn->query($sql_query);
    $sett_row = $execute_query->fetch_assoc();
    $max_time =  $sett_row["max_time"];

    // today date timestamp
    $date = new DateTime();
    $time =  $date->getTimestamp();
    if((($time*1000) - $max_time) > 20000)
    {
?>
    <script type="text/javascript">
        document.getElementById("link_button").style.backgroundColor = "#FFFFFF"
    </script>
<?php       
    } else {
?>
    <script type="text/javascript" >
    document.getElementById("link_button").style.backgroundColor = "#7FFF00"
    </script>
<?php       
    }
?>

Also linkcheck.php is executing in every second through other javascript file name custom.js

setInterval(function() {
    if(true) {
        $.ajax({
            type: "POST",
            url: "linkcheck.php",
            success: function(data){
            }
        });
    }  
},1000);

But it is not working. Please can someone provide a solution?

.button_round { border: none; padding: 7px; display: block; margin: 20px 2px; border-radius: 50%; background-color:red; } — Uday Kumar, Sep 17 '18 at 12:45
the script you're echoing is just coming in as a variable (string) and is not appended. The solution of @Pete should work for you. — Evochrome, Sep 17 '18 at 13:07

score 1 · Answer 1 · answered Sep 17 '18 at 12:51

1

i think you need to write <style> not <script>

if((($time*1000) - $max_time) > 20000)
{
?>
<style>
#link_button{
  background:#FFFFFF;
}
</style>
<?php       
}
else
{
?>
<style>
#link_button{
  background:#7FFF00;
}
</style>
<?php       
}
?>

answered Sep 17 '18 at 12:51

raviramani

513
2
14

score 1 · Answer 2 · answered Sep 17 '18 at 12:51

1

I would change your php file to just echo the colour based on the if:

if((($time*1000) - $max_time) > 20000)
{
  echo "#FFFFFF";
}
else
{
  echo "#7FFF00";
}

Then in your ajax, you can just use the data variable in your response (assuming nothing else is output in the php file):

$.ajax({
  type: "POST",
  url: "linkcheck.php",
  success: function(data) {
      document.getElementById("link_button").style.backgroundColor = data;
  }
});

Please note making a db call every second is not very good

answered Sep 17 '18 at 12:51

Pete

51,385
23
99
140

do a console.log on your data and see what is being returned – Pete Sep 17 '18 at 13:11
any errors - does the link exist on the page that is making the ajax call? – Pete Sep 17 '18 at 13:17
When do you run the ajax call - is it on document ready? See the answer for this: https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery – Pete Sep 17 '18 at 13:19

Change background color of a button in javascript is not working

2 Answers2