Изменить цвет фона кнопки в javascript не работает

Я создал кнопку в файле 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>

Я хочу изменить цвет кнопки в соответствии с условиями, указанными ниже в файле linkcheck.php.

<?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       
    }
?>

Также linkcheck.php выполняется каждую секунду через другое имя файла javascript custom.js

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

Но это не работает. Пожалуйста, кто-нибудь может предложить решение?

.button_round {граница: нет; отступ: 7 пикселей; дисплей: блок; маржа: 20px 2px; радиус границы: 50%; цвет фона: красный; }

— 17.09.2018 14:45

сценарий, который вы повторяете, просто входит как переменная (строка) и не добавляется. Решение @Pete должно работать на вас.

— 17.09.2018 15:07

javascript php css

17.09.2018 14:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

я думаю, вам нужно писать <style>, а не <script>

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

17.09.2018 14:51

Я бы изменил ваш php файл, чтобы он просто отображал цвет на основе if:

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

Затем в вашем ajax вы можете просто использовать переменную data в своем ответе (при условии, что в файле php ничего не выводится):

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

Обратите внимание: делать вызов db каждую секунду не очень хорошо

сделайте console.info для своих данных и посмотрите, что возвращается

— 17.09.2018 15:11

какие-либо ошибки - существует ли ссылка на странице, которая выполняет вызов ajax?

— 17.09.2018 15:17

Когда вы запускаете вызов ajax - он готов в документе? См. Ответ на это: stackoverflow.com/questions/799981/…

— 17.09.2018 15:19

17.09.2018 14:51