I'm trying to make a simple time in/out app for some teens as part of a training program we have. More or less what it should look like
When the user presses "ADD ANOTHER ROW", another row appears with a "Delete" button at the end. When the user clicks "Review" at the bottom, I'd like to disable all buttons above so the encoded info isn't accidentally edited before submitting, then Yes/No appear. If No is selected, the buttons are enabled again for editing. My problem is I can disable everything except for the "Delete Row" buttons.
function finalCheck() {
document.getElementById("review-button").disabled = true;
document.getElementById("add").disabled = true;
document.getElementById("wala").disabled = true;
var wala = document.getElementsByClassName("minus").length;
for(i = 0; i < wala.length; i++){
wala[i].disabled = true;
}
var final = document.getElementById("last-check").content;
var copy = document.importNode(final,true);
document.getElementById("bigGuy").appendChild(copy);
var totalHours = 0;
for (i = 0; i < content.length; i++){
totalHours = totalHours + content[i][3];
console.log(totalHours);
}
document.getElementById("total-hours").innerHTML = totalHours;
}
Here's the HTML template:
<template id="shift" class="data">
<tr class="data-body" id="extra-row">
<td>
<input type="text" class="datepicker" required>
</td>
<td>
<input type="text" class="timepicker" name="clockIn" required>
</td>
<td>
<input type="text" class="timepicker" name="clockOut" required>
</td>
<td class="calced-hours"></td>
<td text-align: center>
<button class="btn waves-effect waves-light minus red lighten-2" name="remove">Delete row</button>
</td>
</tr>
</template>
I should note, the DELETE ROW button itself does work; it will delete the relevant row.
Classname of the Delete buttons is "minus." I tried it without the var; I tried forEach (but I really don't understand fully how to use forEach...). I'm guessing the problem is because the Delete buttons are added by template, but if I try to get the length of the array for var "wala", it gives me a result. So I know the function is able to detect those buttons. I just can't get them disabled.