如何使用循环计数器修改超链接构造函数的值

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

本文关键字：构造函数 超链接 修改 何使用 循环 计数器      更新时间：2023-09-26

我想做的是在使用 for 循环时，使用循环计数器i来修改已经在 html 元素中分配了基数的值。这样我就可以构造多个具有不同值的超链接。详细说明这是我的 html 代码

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
}
<!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>

问题是每次代码循环时我都会得到相同的值。如果每个循环的值都在增加i则不应该发生这种情况。如果您需要我解释得更清楚，请告诉我。

您应该将

i 变量的值保留在另一个具有不同作用域的变量中，因为每次调用此函数时都会重置所有值。

var increase = 0;
function BuildLink() {
    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;
        increase = increase + i;
        values[i] = (inputs[i].value * (1 + (0.1 * increase)));
        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;
    }
}

在我看来，你应该使用Math.random来生成随机值，而不仅仅是增加一个变量。

经过几个小时的这段代码工作，我发现我最初的思考过程是错误的。所以我删除了代码并重写了它。基本上，我必须坐下来，在一块巨大的白板上画出一个概念。这是一个带有完成代码的 plunker。

http://embed.plnkr.co/HcVfHQ3U5WkLDz1fWfOI/preview

我希望这也能帮助其他人。随时问我问题。

相关文章：