Вызвать функцию в другом файле html, если условие внутри нее истинно

Question

Я новичок в кодировании, и у меня есть этот проект, похожий на личную панель инструментов, которую я покажу на маленьком экране для малинового пи. Приборная панель просто показывает текущее время, температуру и имеет кнопку для будильника. И вот проблема.

У меня есть приборная панель: приборная панель

"Wecker" переводится как "Будильник"

Кнопка "Wecker" приводит к другому html файлу, и внутри него у меня есть несколько кнопок с наиболее распространенным временем, которое мне нужно проснуться в: страница тревоги

Когда я нажимаю на время, например 7 : 00:00 граница становится зеленой, показывая, что это время, когда я хочу проснуться тревожные кнопки

Будильник сработает, если текущее местное время достигнет 7:00 o ' часы, условие, которое я написал, состояло в том, чтобы проверить, является ли граница зеленой и соответствует ли время внутри кнопки текущему местному времени:

let timePickerList = document.querySelectorAll('#time_pick_1,#time_pick_2,#time_pick_3,#time_pick_4,#time_pick_5,#time_pick_6');
let timePickerArray = [...timePickerList]; //this just gets the unique id's for the buttons

var whiteStyle = "3px solid white"; //the styling for checking the condition
var greenStyle = "3px solid green"; //the styling for checking the condition

timePickerArray.forEach(function(elem) {  //the function to make the buttons have a green border if
    elem.style.border = whiteStyle;       //the border is white and make it go white if its green
    elem.addEventListener("click", function() {
        if(this.style.border === whiteStyle){
            this.style.border = greenStyle;
        } else if (this.style.border === greenStyle){
            this.style.border = whiteStyle;
        }
    });
    //The function to play the alarm if the border of the element equals "greenStyle" ("3px solid green") and
    // if the current local time equals the time inside of the button. And I call this function
//every second to check this condition.
    function playAlarm(){
        var currentTimeForAlarm = new Date().toLocaleTimeString('en-GB', { hour: "numeric", minute: "numeric"});
        if(elem.style.border === greenStyle && currentTimeForAlarm === elem.innerHTML){
            console.log("ALARM", elem.innerHTML)
            //window.location.href = "alarmscreen.html";
            sound();
        }
    }
    setInterval(playAlarm, 1000);
}) 

Итак, у меня проблема:

Как проверить это условие на странице панели инструментов? Поэтому я просто хочу нажать кнопку «7:00», сделать ее зеленой и go вернуться к приборной панели, но как только я вернусь к приборной панели, кнопка снова станет белой.

Я знаю, что мне, вероятно, нужно работать с node.js или чем-то, но с чего мне начать? Я абсолютно невежественен, когда дело доходит до node.js или серверных вещей.

Может кто-нибудь, может быть, подскажет мне в правильном направлении, что именно Google, чтобы сохранить определенные стили html на сервере и проверить условие на сервере, и если условие является правильным, вызовите функцию независимо от того, какая html страница находится на ней?

Спасибо за чтение, надеюсь, кто-то может мне помочь:)

Репозиторий Github: https://github.com/PhilipKnp/dashboard-for-raspberry

Answer 1

Чтобы решить вышеупомянутую проблему, напишите CSS классы, подобные этому

CSS:

.time-picker{
    border:2px solid white;
  }
.selected{
    border:  2px solid green;
}

и в js используйте localalstorage для хранения идентификатора и содержимого средства выбора времени, когда класс изменено.

JS:

var timePickerList = document.querySelectorAll('.time-picker');
//check if alarms are there in localstorage otherwise return empty array
var alarms=localStorage.getItem('alarms')? JSON.parse(localStorage.getItem('alarms')):[]; 
timePickerArray.forEach(function(elem) { 
       if(alarms.find( alarm => elem.id == alarm.id)){
           elem.classList.add('selected'); //if alarm contains ele id,set background green
       }
       elem.addEventListener("click", function() {
         elem.classList.toggle('selected');//
         if(elem.classList.contains('selected'))
         {
            alarms.push({id:elem.id,content:elem.innerHTML});//
            localStorage.setItem('alarms',JSON.stringify(alarms));
         } 
         else{
             let index=alarms.findIndex( alarm => alarm.id=elem.id)
            if(index!=-1){
                alarms.splice(index,1);//Remove from alarms array if alarm is disabled
                localStorage.setItem('alarms',JSON.stringify(alarms));
            }

         }
    });
})
function playAlarm(){
    let currentTimeForAlarm = new Date().toLocaleTimeString('en-GB', { hour: "numeric", minute: "numeric"});
    let currentAlarm=alarms.find( alarm => alarm.content == currentTimeForAlarm);
    if(currentAlarm){
        console.log(`Alarm from ${alarm.id} and content is ${alarm.content}`)
        sound();
    }
}
setInterval(playAlarm, 1000);