innerHTML using multiple input boxes

JavaScript
1

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&nbsp;</td>
    <td>&nbsp;<input type="text" required="required" name="Propellers" maxlength="20" placeholder="Enter text here..."></td>
  </tr>
  <tr>
    <td align="center">2&nbsp;</td>
    <td>&nbsp;<input type="text" required="required" name="Batteries" maxlength="20" placeholder="Enter text here..."></td>
  </tr>
  <tr>
    <td align="center">3&nbsp;</td>
    <td>&nbsp;<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

2

One thing springs out. In your code you use getElementById() :

var input = document.getElementById("Propellers").value;

but on your inputs, you don’t set an id :

<input type="text" required="required" name="Propellers" maxlength="20" placeholder="Enter text here...">

Do you get any error messages on the console when you run the code? I am learning JavaScript so it might just be me, but I suspect these lines:

parts.sort();
    parts.reverse();

might give you a problem, as I’m not sure where parts comes from in that part of the code.

Next up, each line of your code attempts to retrieve the value of a text-box by id, but there are no id parameters in any of your inputs, as I mentioned above. But, you then assign each one of them to the same variable called input, so by the time you get to the end of all of them, you just have a single variable called input that would contain the value of the text box with id “Hero_6_Camera”, if you have one.

Your next line creates an array with some text items in it, which are then put into the parts page element. I’m not sure how well that will work, just sticking a JS array on the page.

In any case, there’s a few things to be looking at. There are several ways to work through and debug the code - you could use alert() to pop up windows showing variable values, or use console.log() to just display them on the console. Have a play with those until you can see how your code is running, and see what variables contain what values, and so on.

1 Like
3

Sort by what? And do you want to reorder the actual checkboxes, or create a somehow sorted array of their values and output that to parts?

It’s actually possible to refer to the element with that ID like that, however this should better be avoided for various reasons… and then you certainly can’t .sort() or .reverse() a DOM element.

1 Like
4

Ah, cheers. Though at that point the element is empty anyway, if I read it right.

1 Like
5

Hi droopsnoot thanks for responding.
I can’t believe i forgot the “id” in the input box i will correct.
the “parts” comes from where the output will be written: <p id="parts"></p>

these 2 lines i am attempting to sort the input by way of the array.created with the accessories variable.

parts.sort();
 parts.reverse();

var accessories = ["Propellers", "Batteries", "Gimbal", "Micro_HDMI", "Camera_Housing", "Carry_Bag", "Karma_Drone", "Karma_Grip", "Hero_6_Camera"];
	document.getElementById("parts").innerHTML = accessories;

I am not getting any errors otherwise.

6

Sorry, forgot to mention. I want to sort the array in decending order. I read that i can use the sort() and rverse() to accomplish that in a web post.

7

Surely then, you’ll need to put them after you populate the parts div, rather than before as you seem to be doing now? It might be easier to sort the array, though, and then stick it into the div.

1 Like
8

Update to function: I moved the function into the head section <script type="text/javascript">
Then having given each variable a unique name. When i check on the submit button
i am just getting the variable names returned. At least i am getting something now.

I think my order of execution is out of whack.

<script type="text/javascript">
<!-- -->
function gopro() {
 
	var ox1 = document.getElementById("Propellers").value;
	var ox2 = document.getElementById("Batteries").value;
	var ox3 = document.getElementById("Gimbal").value;
	var ox4 = document.getElementById("Micro_HDMI").value;
	var ox5 = document.getElementById("Camera_Housing").value;
	var ox6 = document.getElementById("Carry_Bag").value;
	var ox7 = document.getElementById("Stabilization").value;
	var ox8 = document.getElementById("Karma_Drone").value;
	var ox9 = document.getElementById("Karma_Grip").value;
	var ox10 = document.getElementById("Hero_6_Camera").value;
	var accessories = ["ox1", "ox2", "ox3", "ox4", "ox5", "ox6", "ox7", "ox8", "ox9", "ox10"];
	document.getElementById("parts").innerHTML = accessories;   
	parts.sort();
    parts.reverse();
}
</script>
9

I see it - when i hit submit i am getting the strings from the array and not the input fields. Should i remove the quotes from the variable names in the array?

10

OMG!! i am making progress. So i removed the quotes from the variables names in the array and now i actually get the value from the input fields. But my sorry is still not working… bummer

11

More progress:

so i moved things around thinking i had an execution order issue and sure enough i now get output and its sorted in decending order. I also tried sorting the variable “accessories” and not the “parts” in the div and boom it works.

Thanks for steering me in the right direction!!!

1 Like
12 
Finished with

<script type="text/javascript">
<!-- -->
function gopro() {
 
	var ox1 = document.getElementById("Propellers").value;
	var ox2 = document.getElementById("Batteries").value;
	var ox3 = document.getElementById("Gimbal").value;
	var ox4 = document.getElementById("Micro_HDMI").value;
	var ox5 = document.getElementById("Camera_Housing").value;
	var ox6 = document.getElementById("Carry_Bag").value;
	var ox7 = document.getElementById("Stabilization").value;
	var ox8 = document.getElementById("Karma_Drone").value;
	var ox9 = document.getElementById("Karma_Grip").value;
	var ox10 = document.getElementById("Hero_6_Camera").value;
	var accessories = [ox1, ox2, ox3, ox4, ox5, ox6, ox7, ox8, ox9, ox10];
		accessories.sort();
    accessories.reverse();
	document.getElementById("parts").innerHTML = accessories;   

}
</script>
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.