如何將用戶的輸入值放入 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 部分。 我不知道如何將用戶值合並到開關中，因此代碼的 rest 可以運行這些值。 我通過 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];

然后更改您的 switch 案例中的語句以使用將添加到數組末尾的 push function：

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

或者，您可以不理會您的開關，並使用 push 在 switch 語句之后添加 6 個值，如下所示：

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

Answer 2

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

如果這是正確的，function 會變得更加簡單：

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];
    }
}

Answer 3

我發現您的代碼唯一有問題的是您試圖找到一個名為 formGearRatios 的表單，但該表單實際上稱為 form2。 如果您更改該行，rest 在我的測試中工作（如果用戶沒有 select 任何內容，它將使用來自備用輸入的值）。

編輯作為注釋，我還必須以調用 function 並檢索比率值的方式進行編輯，因此假設您的完整代碼已經正確執行此操作，唯一的問題是表單 ID。