mardi 15 décembre 2020

How to use multiple reference multiple checkbox forms to update progress bar

I am attempting to use vanilla javascript to create a progress bar updated with checkboxes. With the visual format I want, it requires a new form for all the checkboxes (check1, check2, etc). How can I create a variable/array that includes and uses all the forms/checkboxes? Here is what I have so far: https://jsfiddle.net/Knibber4/nhjr8ou6/28/ '''

<!--progress bar-->
<div id="myProgress">
  <div id="myBar">0%</div>
</div>
<br>

<!--update button-->
<div class="buttonHold">
  <input type="button" id="update" value="Update" onclick="update()" />
</div>

<table class="numbers">
  <tbody>
    <tr>
      <td>#001-030</td>
    </tr>
  </tbody>
</table>

<table class="hometable">
  <tbody>
    <tr>
      <td>
        <p class="id">#001</p>
      </td>
      <td>
        <p class="name">Bulbasaur</p>
      </td>
      <td class="img" rowspan="2"><img src="assets/Bulbasaur.PNG" alt="Bulbasaur" width="180" 
       height="180"></td>
      <td>
        <p class="id">#002</p>
      </td>
      <td>
        <p class="name">Ivysaur</p>
      </td>
      <td class="img" rowspan="2"><img src="assets/Ivysaur.PNG" alt="Ivysaur" width="180" 
      height="180">
      </td>
      <td>
        <p class="id">#003</p>
      </td>
      <td>
        <p class="name">Venusaur</p>
      </td>
      <td class="img" rowspan="2"><img src="assets/Venusaur.PNG" alt="Venusaur" width="180" 
      height="180">
      </td>
    </tr>

    <tr>
      <td>
        <form id="check1">
          <input id="chk1" type="checkbox" value="1" /></form>
      </td>
      <td>
        <a href="Bulbasaur.html">
         <p class="location">Location</p>
        </a>
      </td>
      <td>
        <form id="check2">
          <input id="chk2" type="checkbox" value="2" /></form>
      </td>
      <td><a href="Ivysaur.html">
        <p class="location">Location</p>
        </a></td>
      <td>
        <form>
          <input id="chk3" type="checkbox" value="3" />
        </form>
      </td>
      <td><a href="Venusaur.html">
        <p class="location">Location</p>
        </a></td>
    </tr>
  </tbody>
</table>

'''




Aucun commentaire:

Enregistrer un commentaire