如何獲取用戶的輸入值到JS數組中？

Question

我爲用戶添加了將自己的值輸入到6個輸入字段的功能，其中一些或全部可以留空。我已經有一個數組填充了默認值。如何將用戶的值存入該數組，以便對其執行計算？

用戶可以使用提供的值或輸入自己的值。提供的值部分工作正常。我現在增加了用戶添加自己的值的能力（HTML的下半部分）。

 <table border="0" cellpadding="5" cellspacing="0" width="100%"> 
      <tr> 
       <td class="alignright"> 
        <form id="form2"> 
         <select class="displayLength" name="ratio" size="6"> 
          <option value=''>Choose:</option> 
          <option value='sc10_4x4'>SC10 4x4: 58, 60, 62, 93</option> 
          <option value='sc10'>SC10: 75, 78, 81, 84, 87</option> 
          <option value='sc8'>SC8: 50, 52, 54</option> 
          <option value='b44'>B44: 72, 75, 78, 81, 84</option> 
          <option value='b4t4'>B4, T4: 72, 75, 78, 81, 84, 87</option> 
          <option value='gt2'>GT2: 54, 55, 56</option> 
         </select> 
       </td></tr> 

//這部分是新的：

   <tr><td> 
       Alternate spur values:<br><br> 
       <input class="display" type="number" size="14" value="" name="spur1">&nbsp; 
       <input class="display" type="number" size="14" value="" name="spur2">&nbsp; 
       <input class="display" type="number" size="14" value="" name="spur3"><br><br> 
       <input class="display" type="number" size="14" value="" name="spur4">&nbsp; 
       <input class="display" type="number" size="14" value="" name="spur5">&nbsp; 
       <input class="display" type="number" size="14" value="" name="spur6"> 
       </td></tr> 
      <tr> 
       <td class="alignright"> 
        <input id="buttonNewRatios" class="buttPress2" type="button" value="Alternates"><br><br> 
         <textarea name="moreRatios" cols="42" rows="8"></textarea> 
       </td></tr></form></table> 

這裏是我遇到的麻煩JavaScript部分。我不知道如何將用戶值合併到交換機中，以便代碼的其餘部分可以運行這些值。我通過JSHint.com運行代碼並通過。但是，沒有顯示結果。

function gearSpurs(ratio) { 
    var form = document.getElementById('formGearRatio'); 
    var spur1 = form.elements.spur1.value, 
     spur2 = form.elements.spur2.value, 
     spur3 = form.elements.spur3.value, 
     spur4 = form.elements.spur4.value, 
     spur5 = form.elements.spur5.value, 
     spur6 = form.elements.spur6.value; 

     var spurs = []; 

     switch (ratio) { 
      case 'sc10_4x4': 
      spurs = ['58', '60', '62', '93']; 
      break; 
      case 'sc10': 
      spurs = ['75', '78', '81', '84', '87']; 
      break; 
      case 'sc8': 
      spurs = ['50', '52', '54']; 
      break; 
      case 'b44': 
      spurs = ['72', '75', '78', '81', '84']; 
      break; 
      case 'b4t4': 
      spurs = ['72', '75', '78', '81', '84', '87']; 
      break; 
      case 'gt2': 
      spurs = ['54', '55', '56']; 
      break; 
      default: 
      spurs = [spur1, spur2, spur3, spur4, spur5, spur6]; 
      break; 
     } 
     return spurs; 
    } 

如何將spur1 ... 6合併到switch語句中？ （此代碼是在iPhone和Android環境中使用），從增加的偉大工程開）

Answer 1

您可以在switch語句前加上他們像這樣：

spurs = [spur1, spur2, spur3, spur4, spur5, spur6]; 

然後改變報表您切換情況下才使用推送功能將添加到數組的末尾：

spurs.push(['58', '60', '62', '93']); 

或者，你可以獨自離開你的交換機，並使用推，像這樣的switch語句後添加6個值：

spurs.push([spur1, spur2, spur3, spur4, spur5, spur6]); 

Answer 2

我只看到你的代碼有問題，你正在試圖找到一個名爲formGearRatios的窗體，但窗體實際上被稱爲form2。如果你改變這一行，其餘的工作在我的測試中（如果用戶沒有選擇任何東西，它將使用替代輸入中的值）。

編輯作爲一個說明，我也必須編輯調用你的函數和檢索比率的值，所以假設你的完整代碼已經做到了這一點，唯一的問題是表單ID。

Answer 3

編輯：基於你接受的答案，你現在似乎想要返回一個包含2個數組的數組。一個具有預定義比率，另一個具有用戶定義的雜散。

如果這是正確的，功能變得更簡單：

var ratios = { 
    sc10_4x4: ['58', '60', '62', '93'], 
    sc10:  ['75', '78', '81', '84', '87'], 
    sc8:  ['50', '52', '54'], 
    b44:  ['72', '75', '78', '81', '84'], 
    b4t4:  ['72', '75', '78', '81', '84', '87'], 
    gt2:  ['54', '55', '56'] 
}; 

function gearSpurs(ratio) { 

    var form = document.getElementById('formGearRatio'), 
     spur1 = form.elements.spur1.value, 
     spur2 = form.elements.spur2.value, 
     spur3 = form.elements.spur3.value, 
     spur4 = form.elements.spur4.value, 
     spur5 = form.elements.spur5.value, 
     spur6 = form.elements.spur6.value; 

    return [ [spur1, spur2, spur3, spur4, spur5, spur6], ratios[ratio] ]; 

} 

---

你的表單標籤是不平衡的。請用<form>包裹整個<table>。 （不能啓動一個<td>表單並結束它在不同的一個。）

<form id="form2"> 
    <table border="0" cellpadding="5" cellspacing="0" width="100%"> 
     <tr>...</tr> 

     <tr>...</tr> 
     <tr>...</tr> 
    </table> 
</form> 

我沒有看到任何元素的ID formGearRatio。

你可以返工這樣的代碼來簡化一點：

var ratios = { 
    sc10_4x4: ['58', '60', '62', '93'], 
    sc10: ['75', '78', '81', '84', '87'], 
    sc8: ['50', '52', '54'], 
    b44: ['72', '75', '78', '81', '84'], 
    b4t4: ['72', '75', '78', '81', '84', '87'], 
    gt2: ['54', '55', '56'] 
}; 

function gearSpurs(ratio) { 

    if (ratios[ratio]) { 
     return ratios[ratio]; 
    } else { 
     var form = document.getElementById('formGearRatio'), 
      spur1 = form.elements.spur1.value, 
      spur2 = form.elements.spur2.value, 
      spur3 = form.elements.spur3.value, 
      spur4 = form.elements.spur4.value, 
      spur5 = form.elements.spur5.value, 
      spur6 = form.elements.spur6.value; 
     return [spur1, spur2, spur3, spur4, spur5, spur6]; 
    } 
}