How to use a loop counter to modify values for a hyperlink constructor

What I'm trying to do is while using a for loop, use the loop counter
i

Open in new window

to modify values that already have a base number assigned to them in a html element. This is so i can construct multiple hyperlinks with different values. To elaborate here is my html code
var inputs = document.querySelectorAll("input");
var ids = [];
var values = [];
var links = [];
var MasLink = "";
var words = []
for (i = 0; i < inputs.length; i++) {
  ids[i] = inputs[i].id;
  values[i] = (inputs[i].value * (1 + (0.1 * i)));
  console.log(i, values)
};
for (i = 0; i < inputs.length; i++) {
  links[i] = "http://data.sparkfun.com/input/public_key?private_key=private_key&altitude=" + values[2] + "&battry_voltage=" + values[3] + "&day=" + values[4] + "&external_temp=" + values[5] + "&heading=" + values[6] + "&internal_temp=" + values[7] + "&latitude=" + values[8] + "&longitude=" + values[9] + "&minute=" + values[10] + "&month=" + values[11] + "&second=" + values[12] + "&speed=" + values[13] + "&year=" + values[14];
  words[i] = "<small>" + ids[2] + ":" + values[2] + ", " + ids[3] + ":" + values[3] + ", " + ids[4] + ":" + values[4] + ", " + ids[5] + ":" + values[5] + ", " + ids[6] + ":" + values[6] + ", " + ids[7] + ":" + values[7] + ", " + ids[8] + ":" + values[8] + ", " + ids[9] + ":" + values[9] + ", " + ids[10] + ":" + values[10] + ", " + ids[11] + ":" + values[11] + ", " + ids[12] + ":" + values[12] + ", " + ids[13] + ":" + values[13] + ", " + ids[14] + ":" + values[14] + ", " + ids[15] + ":" + values[15] + ", " + "</small>"
  MasLink += "<a href=" + links[i] + ">" + words[i] + "</a><br><br>"
  document.getElementById("BuiltLink").innerHTML = MasLink
}

Open in new window

<!DOCTYPE html>
<html>

<body>
  <form id="frm1">
    <table>
      <thead>
        <tr>
          <td>PublicKey:</td>
          <td>PrivateKey:</td>
          <td>latitude:</td>
          <td>longitude:</td>
          <td>altitude:</td>
          <td>heading:</td>
          <td>speed:</td>
          <td>external_temp:</td>
          <td>internal_temp:</td>
          <td>battry_voltage:</td>
          <td>hour:</td>
          <td>minute:</td>
          <td>second:</td>
          <td>year:</td>
          <td>month:</td>
          <td>day:</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" id="PublicKey" value="PublicKey"></td>
          <td><input type="text" id="PrivateKey" value="PrivateKey"></td>
          <td><input type="text" id="latitude" value="33.505304"></td>
          <td><input type="text" id="longitude" value="-86.807809"></td>
          <td><input type="text" id="altitude" value="5"></td>
          <td><input type="text" id="heading" value="13.7"></td>
          <td><input type="text" id="speed" value="3"></td>
          <td><input type="text" id="external_temp" value="72"></td>
          <td><input type="text" id="internal_temp" value="70"></td>
          <td><input type="text" id="battry_voltage" value="12.7"></td>
          <td><input type="text" id="hour" value="10"></td>
          <td><input type="text" id="minute" value="0"></td>
          <td><input type="text" id="second" value="0"></td>
          <td><input type="text" id="year" value="2015"></td>
          <td><input type="text" id="month" value="6"></td>
          <td><input type="text" id="day" value="29"></td>
        </tr>
      </tbody>
    </table>
    <button type="button" onclick="BuildLink()" class="btn btn-default">Gimme Link!</button>
  </form>
  <div>
    <a id="printlink" href=""></a>
  </div>
  <div id="BuiltLink">
  </div>
</body>

</html>

Open in new window

Problem is I'm getting the same value each time the code loops. Which shouldn't happen if
i

Open in new window

is increasing in value for each loop. Please let me know if you need me to explain clearer.
Hwy419Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ioannis ParaskevopoulosCommented:
As i see it your code does what you ordered it to do. So i guess you should consider what you order it to do.

What you have there is:

You have 15 inputs
For each of the inputs you load its value to an array named values.
If you see the contents of the array after the first iteration, you will see that it is correctly loaded with 15 values.
You have a second iteration that
For each of the inputs creates a link.
The link consists of hardcoded entries of the values array as : values[0]. Values[0] will always be the same no matter what the value of the i is. So you end up with 15 identical links.

So, what exactly are you trying to accomplish? I can guess some scenarios of what you need, but i would like to see an example. So if you could post what your expected results would be, then i will be more than willing to help you.

Giannis
Steve BinkCommented:
Also, line 16 in your script is replacing the content of #BuiltLink instead of appending to it.  As the script runs, you will only ever see a single link in that element.

Overall, your code seems a bit inefficient:
1) executing a mathematical function on values that are clearly not numerical,
2) trying to artificially link arrays instead of using objects
3) constructing a "form submission" link instead of allow the form to run naturally

I think Ioannis Paraskevopoulos has the right of it...  explain a little about what you are trying to do.  Also, are you at all familiar with jQuery?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Hwy419Author Commented:
No, im only just learning JS. I'v got rid of the submit button and just letting the code run after the page is done loading. So I'v just basicly made myself a checklist of what i need to do in the code.
1.in the for loop, create an array of all the value data.
2.add variable i to the value data.
3.construct a link with that value data and add the link to the page.
4.repeat the process
Steve BinkCommented:
jQuery makes this sort of DOM manipulation easier, but given your description, I'm not sure you need to go that route.

Is this an exercise to learn JS, or is there an actual project behind this?
Hwy419Author Commented:
Yeah, My real project is a google map api app that will plot and keep track of a weather balloon. problem with that project right now is i need data to test and build that main app. So while I'm waiting for my boss to build his arduino, which we was going to get sample data from, is taking him a while. so i'm making this current app for the mean time. So far now that im rewriting the code it's coming together pretty nicely this is what i have so far.
<script>
var Elements = document.querySelectorAll("input");
var Data = Object();
Data.id = [];
Data.value = [];
Data.links = [];
for (i = 0; i < Elements.length; i++) {
    Data.id[i] = Elements[i].id;

    // Construct an array with all values needed to be modified.
    for (y = 0; y < Elements.length; y++) {
        Data.value[y] = Elements[y].value;
    };

    // Modify each value by adding i
    for (x = 0; x < Elements.length; x++) {
        Data.value[x] = Number(Data.value[x]) + i;
    };
    // Construct a hyperlink with current values.
    // Add hyperlink to dom.
    console.log(Data.value);
};
</script>

Open in new window

Steve BinkCommented:
I have some additional suggestions for you:

1) Make var Data an array of objects, as in Data[ i ].value and Data[ i ].link.
2) Alternatively, use the elements themselves to store the data, thus avoiding additional unnecessary variables
3) Instead of acting on and building links from the value of i in the page, why not pass i to the back-end, and let it do the heavy lifting?
Hwy419Author Commented:
What do you mean with your #3? I don't really understand.
Hwy419Author Commented:
I have finally got the outcome i was looking for. Here we go http://embed.plnkr.co/HcVfHQ3U5WkLDz1fWfOI/preview

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Hwy419Author Commented:
I know it's a rediculous concept and also being hard to exsplain. but the plunker link shows what i needed to do.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.