asked on

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

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

Open in new window

is increasing in value for each loop. Please let me know if you need me to explain clearer.

Ioannis Paraskevopoulos

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

Hwy419

ASKER

I'm trying to construct a series of hyperlinks with modified data. Using i to modify the data to a basic pattern. such as:
http://data.sparkfun.com/input/publickey?private_key=privatekey&altitude=5&battry_voltage=12.7&day=29&external_temp=72&heading=13.7&internal_temp=70&latitude=33.505304&longitude=-86.807809&minute=0&month=6&second=0&speed=3&year=2015

http://data.sparkfun.com/input/publickey?private_key=privatekey&altitude=6&battry_voltage=13.7&day=30&external_temp=73&heading=14.7&internal_temp=71&latitude=34.505304&longitude=-85.807809&minute=1&month=7&second=1&speed=4&year=2016

http://data.sparkfun.com/input/publickey?private_key=privatekey&altitude=7&battry_voltage=14.7&day=31&external_temp=74&heading=15.7&internal_temp=72&latitude=35.505304&longitude=-84.807809&minute=2&month=8&second=2&speed=5&year=2017

I figured out that i had a bad concept when making my code. I'm currently rebuilding the code. I'll let y'all if i figure it out.

Steve Bink

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?

Hwy419

ASKER

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 Bink

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?

Hwy419

ASKER

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 Bink

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?

Hwy419

ASKER

What do you mean with your #3? I don't really understand.

ASKER CERTIFIED SOLUTION

Hwy419

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Hwy419

ASKER

I know it's a rediculous concept and also being hard to exsplain. but the plunker link shows what i needed to do.