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