Hi there newbie here. I am trying to create a script that will utilize multiple input boxes, sort them and reprint on page using innerHTML. I created this function:
<script>
function gopro() {
parts.sort();
parts.reverse();
var input = document.getElementById("Propellers").value;
var input = document.getElementById("Batteries").value;
var input = document.getElementById("Gimbal").value;
var input = document.getElementById("Micro_HDMI").value;
var input = document.getElementById("Camera_Housing").value;
var input = document.getElementById("Carry_Bag").value;
var input = document.getElementById("Stabilization").value;
var input = document.getElementById("Karma_Drone").value;
var input = document.getElementById("Karma_Grip").value;
var input = document.getElementById("Hero_6_Camera").value;
var accessories = ["Propellers", "Batteries", "Gimbal", "Micro_HDMI", "Camera_Housing", "Carry_Bag", "Karma_Drone", "Karma_Grip", "Hero_6_Camera"];
document.getElementById("parts").innerHTML = accessories;
}
`</script>
I am using a button to call the function:
<button onclick="gopro()">Sort and display entries</button>
I am using a table to format all the input boxes
<table width="50%" border="0"> <!--Create a table to format input fields -->
<tr>
<td align="center">Item #</td>
<td>Item Name</td>
</tr>
<tr>
<td align="center">1 </td>
<td> <input type="text" required="required" name="Propellers" maxlength="20" placeholder="Enter text here..."></td>
</tr>
<tr>
<td align="center">2 </td>
<td> <input type="text" required="required" name="Batteries" maxlength="20" placeholder="Enter text here..."></td>
</tr>
<tr>
<td align="center">3 </td>
<td> <input type="text" required="required" name="Gimbal" maxlength="20" placeholder="Enter text here..."></td>
</tr>
and so on…
<p id="parts"></p>
The problem is it does not work. Any pointers would be appreciated.
thx