Автоматическое обновление функции JavaScript

Question

Я пытаюсь сделать таймер для своей школы, показывая периоды этого одного учителя, который учит там. Иногда работает нижний таймер, иногда это не так. Мне нужна помощь в этом, но иногда она будет загружаться должным образом, и иногда она будет показывать текст по умолчанию. Но мне нужно, чтобы всякий раз, когда была выбрана новая кнопка/тип дня, она автоматически обновляет время. Как я мог это достичь?

var setTime=setInterval(function() {clock()}, 1000) 
 
function clock() { 
 
    var d = new Date(); 
 
    document.getElementById("time").innerHTML = d.toLocaleTimeString(); 
 
} 
 
var ringerTime = function() { 
 
    var mark = document.getElementById("time2"); 
 
    var norm = document.getElementById("nday"); 
 
    var thur = document.getElementById("tday"); 
 
    var redN = document.getElementById("reg"); 
 
    var redF = document.getElementById("full"); 
 
    var period1 = document.getElementById("p1"); 
 
    var period2 = document.getElementById("p2"); 
 
    var period4 = document.getElementById("p4"); 
 
    var period5 = document.getElementById("p5"); 
 
    var period7 = document.getElementById("p7"); 
 
    var period8 = document.getElementById("p8"); 
 
    if(period1.checked && norm.checked) { 
 
    mark.innerHTML = "8:56:00 AM"; 
 
    } 
 
    else if(period1.checked && thur.checked) { 
 
    mark.innerHTML = "8:49:00 AM"; 
 
    } 
 
    else if(period1.checked && redN.checked) { 
 
    mark.innerHTML = "8:53:00 AM"; 
 
    } 
 
    else if(period1.checked && redF.checked) { 
 
    mark.innerHTML = "8:51:00 AM"; 
 
    } 
 
    if(period2.checked && norm.checked) { 
 
    mark.innerHTML = "9:46:00 AM"; 
 
    } 
 
    else if(period2.checked && thur.checked) { 
 
    mark.innerHTML = "9:32:00 AM"; 
 
    } 
 
    else if(period2.checked && redN.checked) { 
 
    mark.innerHTML = "9:40:00 AM"; 
 
    } 
 
    else if(period2.checked && redF.checked) { 
 
    mark.innerHTML === "9:35:00 AM"; 
 
    } 
 
    if(period4.checked && norm.checked) { 
 
    mark.innerHTML = "12:00:00 PM"; 
 
    } 
 
    else if(period4.checked && thur.checked) { 
 
    mark.innerHTML = "11:31:00 AM"; 
 
    } 
 
    else if(period4.checked && redN.checked) { 
 
    mark.innerHTML = "11:48:00 AM"; 
 
    } 
 
    else if(period4.checked && redF.checked) { 
 
    mark.innerHTML = "11:37:00 AM"; 
 
    } 
 
    if(period5.checked && norm.checked) { 
 
    mark.innerHTML = "12:50:00 PM"; 
 
    } 
 
    else if(period5.checked && thur.checked) { 
 
    mark.innerHTML = "12:13:00 PM"; 
 
    } 
 
    else if(period5.checked && redN.checked) { 
 
    mark.innerHTML = "12:35:00 PM"; 
 
    } 
 
    else if(period5.checked && redF.checked) { 
 
    mark.innerHTML = "12:21:00 PM"; 
 
    } 
 
    if(period7.checked && norm.checked) { 
 
    mark.innerHTML = "2:30:00 PM"; 
 
    } 
 
    else if(period7.checked && thur.checked) { 
 
    mark.innerHTML = "1:37:00 PM"; 
 
    } 
 
    else if(period7.checked && redN.checked) { 
 
    mark.innerHTML = "2:09:00 PM"; 
 
    } 
 
    else if(period7.checked && redF.checked) { 
 
    mark.innerHTML = "1:51:00 PM"; 
 
    } 
 
    if(period8.checked && norm.checked) { 
 
    mark.innerHTML = "3:20:00 PM"; 
 
    } 
 
    else if(period8.checked && thur.checked) { 
 
    mark.innerHTML = "2:20:00 PM"; 
 
    } 
 
    else if(period8.checked && redN.checked) { 
 
    mark.innerHTML = "2:56:00 PM"; 
 
    } 
 
    else if(period8.checked && redF.checked) { 
 
    mark.innerHTML = "2:35:00 PM"; 
 
    } 
 
} 
 
window.onload = function() { 
 
    clock(); 
 
    ringerTime; document.getElementById("p1").checked = true; 
 
    document.getElementById("nday").checked = true; 
 
};

.date, h2 p { 
 
    text-align: center; 
 
    font-size: 200%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.date h2 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.date p { 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background: linear-gradient(#101010, #151515, #101010); 
 
    border: 1px solid red; 
 
    color: white; 
 
    width: 875px; 
 
    font-size: 225%; 
 
} 
 
.select { 
 
    text-align: center; 
 
    font-family: arial; 
 
    font-size: 125%; 
 
    margin: 0; 
 
    margin-top: 25px; 
 
    padding: 0; 
 
}

<html> 
 
    <body onload="javascript:ringerTime()"> 
 
    <div class="date"> 
 
     <h2>Time</h2> 
 
     <br> 
 
     <p id="time"></p> 
 
     <br> 
 
     <h2>Time Period Ends</h2> 
 
     <br> 
 
     <p id="time2">%TIME_PERIOD_ENDS%</p> 
 
    </div> 
 
    <div class="select"> 
 
     <input id="p1" type="radio" name="period" value="period1">Period 1 
 
     <input id="p2" type="radio" name="period" value="period2">Period 2 
 
     <input id="p4" type="radio" name="period" value="period4">Period 4 
 
     <input id="p5" type="radio" name="period" value="period5">Period 5 
 
     <input id="p7" type="radio" name="period" value="period7">Period 7 
 
     <input id="p8" type="radio" name="period" value="period8">Period 8 
 
     <br> 
 
     <input id="nday" type="radio" name="day" value="normal">Regular Day 
 
     <input id="tday" type="radio" name="day" value="thursday">Thursday 
 
     <input id="reg" type="radio" name="day" value="regularMon">Regular Monday 
 
     <input id="full" type="radio" name="day" value="fullMon">Full Monday 
 
    </div> 
 
    </body> 
 
</html>

JSFiddle: http://jsfiddle.net/5b2f68qd/

Answer 1

Причина это не работает, потому что вы проверяете значения, прежде чем вы установили их. Там есть несколько других проблемы тоже, но если вы принять вызов от вашего тела тега: <body onload="javascript:ringerTime()"> к <body> Тогда исправьте вызов функции в сценарии в нижней части и переместить вызов звонка до конца:

window.onload = function() { 
    clock(); 
    document.getElementById("p1").checked = true; 
    document.getElementById("nday").checked = true; 
ringerTime(); 
}; 

Это должно исправить. Here's a working fiddle.