如何获取用户的输入值到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]; 
    } 
}