Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

135
Views
How do I disable an array of buttons added by template?

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.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!