Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

136
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda