如何使用循環計數器修改超鏈接構造函數的值

我想要做的是在使用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值都在增加，則不應發生這種情況。請讓我知道你是否需要我解釋清楚。

來源

2015-06-11 Aochi Toxx

經過幾個小時的工作，我想到了我最初的思考過程是錯誤的。所以我刪除了代碼並重寫了它。基本上我不得不坐下來，在一塊大白板上畫一個概念。這是一個有完成代碼的笨蛋。

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

我希望這可以幫助別人了。隨意問我問題。

來源

2015-06-12 18:19:00

您應該將i變量的值保存在另一個與您的BuildLink函數的作用域不同的變量中，因爲每次調用此函數時都會重置所有值。

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來產生隨機值而不是僅僅增加一個變量。

來源

2015-06-11 18:17:59 devconcept

感謝您的回覆，大多數情況下，當我需要改變值我會使用Math.random。但這只是需要基於gps位置的值的項目的一部分。整個項目基本上是一個先進的地圖api來跟蹤天氣氣球。 –

如何使用循環計數器修改超鏈接構造函數的值

回答

相關問題