Javascript - Need to reset all page elements before calling function

Question

I have a function that creates a random schedule. On the click of a button, I want to reset all values and recreate another schedule. Instead of reinitializing all of my elements to their original values, I found it to be easier to reload the page. When I have two separate buttons, one that generates, the schedule and one that reloads, this works perfectly.

However, I need one button to do both, but when I call reload at the beginning of the function, the schedule gets populated and is automatically reloaded again.

function generateSchedule() {

    window.location.reload();

    for (var i = 0; exams_scheduled.length < TOTAL_EXAMS; i++){

        var time = randomNumber(3); // 3 exam timeslots per day
        var day = randomNumber(6); // 6 exam days per week
        var week = randomNumber(2); // 2 week period

        var weekday = day + '' + week; 
        var exam_id = "exam-" + time + '' + weekday; 

    if ((exam_count[weekday] < EXAMS_PER_DAY) && (!exams_scheduled.includes(exam_id))) {
        exam_count[weekday] += 1;
        exams_scheduled.push(exam_id);

        document.getElementById(exam_id).className += "exam";   
    }
  }  
}

Here is a codepen that calls reload at the beginning of the generate function. As you can see, the schedule is generated and automatically reloaded again.

http://codepen.io/skyro/pen/apQwWY

Could anyone suggest a solution?

Answer 1

Well from what i could understand is that you want the button to reload your page but right after it does that it calls out the new schedule, is that right? If so you can use the window.onload on the schedule so that it is automatically summoned right after the page loads? Or maybe... The setTimeout(callNewSchedule, 100) function would be useful by simply setting a delay from when the button was triggered. Doubt this would work though. Coz as soon as that page reloads it looses all of its previous data and the setTimeout function would never happen. ergo the onload is the best choice in this matter.

Answer 2

Took a while but seems like it works. You don't have to reload the page now to get new values.

 function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } const EXAMS_PER_DAY = 2; const TOTAL_EXAMS = 5; var exam_days = { 00: 0, 10: 0, 20: 0, 30: 0, 40: 0, 50: 0, 01: 0, 11: 0, 21: 0, 31: 0, 41: 0, 51: 0 }; var exam_array = []; function generateSchedule() { exam_array = []; var c = [[0,1,2],[0,1,2,3,4,5],[0,1]]; for (var i = 0; i < c[0].length; i++) { for (var j = 0; j < c[1].length; j++) { for (var k = 0; k < c[2].length; k++) { b = `${c[0][i]}${c[1][j]}${c[2][k]}`; document.getElementById('exam-' + b).style.background = 'transparent'; } } } for (var i = 0; exam_array.length < TOTAL_EXAMS; i++) { var time = getRandomInt(0, 2); var day = getRandomInt(0, 5); var week = getRandomInt(0, 1); var exam_id = "exam-" + time + day + week; if (exam_days[day + '' + week] < EXAMS_PER_DAY && !exam_array.includes(exam_id)) { exam_days[day + '' + week] += 1; exam_array.push(exam_id); document.getElementById(exam_id).style.background = "green"; } } } 

 table, th, td { border: 1px solid black; } 

 <table> <tr> <th></th> <th scope="col">M</th> <th scope="col">T</th> <th scope="col">W</th> <th scope="col">R</th> <th scope="col">F</th> <th scope="col">S</th> </tr> <tr> <th scope="row">Morning</th> <td id="exam-000"></td> <td id="exam-010"></td> <td id="exam-020"></td> <td id="exam-030"></td> <td id="exam-040"></td> <td id="exam-050"></td> </tr> <tr> <th scope="row">Afternoon</th> <td id="exam-100"></td> <td id="exam-110"></td> <td id="exam-120"></td> <td id="exam-130"></td> <td id="exam-140"></td> <td id="exam-150"></td> </tr> <tr> <th scope="row">Evening</th> <td id="exam-200"></td> <td id="exam-210"></td> <td id="exam-220"></td> <td id="exam-230"></td> <td id="exam-240"></td> <td id="exam-250"></td> </tr> </table> <table> <tr> <th></th> <th scope="col">M</th> <th scope="col">T</th> <th scope="col">W</th> <th scope="col">R</th> <th scope="col">F</th> <th scope="col">S</th> </tr> <tr> <th scope="row">Morning</th> <td id="exam-001"></td> <td id="exam-011"></td> <td id="exam-021"></td> <td id="exam-031"></td> <td id="exam-041"></td> <td id="exam-051"></td> </tr> <tr> <th scope="row">Afternoon</th> <td id="exam-101"></td> <td id="exam-111"></td> <td id="exam-121"></td> <td id="exam-131"></td> <td id="exam-141"></td> <td id="exam-151"></td> </tr> <tr> <th scope="row">Evening</th> <td id="exam-201"></td> <td id="exam-211"></td> <td id="exam-221"></td> <td id="exam-231"></td> <td id="exam-241"></td> <td id="exam-251"></td> </tr> </table> <br /> <button onclick="generateSchedule();">Generate</button> <button onclick="location.reload(true);">Reload</button> <button onclick="window.print();">Print</button>