如何動態更改輸入數字的值並驗證其中的數據？

Question

我正在嘗試使用JavaScript為我的網站創建一些動態代碼。 在我的代碼中，我有一個用於創建新事件的表單，包括此事件所需的人數。 這是我的HTML表單代碼：

<td align="center">Number of people:<br /><select id="ppl_select" name="ppl_select" onchange="checkPpl(this); setMinMax(this)">
    <option value="8" selected="selected">8</option>
    <option value="16">16</option>
    <option value="0">Other</option>
    </select><br />
    <input type="number" min="1" max="30" name="other_ppl" id="other_ppl" disabled="disabled" />
    </td>

id =“ other_ppl”的最后一個輸入用於非常規事件，因此僅當您從下拉列表中選擇“ Other”選項時，該輸入才可見。

選擇以上選項之一后，我還有一些輸入字段可計算所有數據：

<td align="right">Tanks: <input align="right" width="30" type="number" id="tanks_num" value="2" /><p id="max_tanks"></p></td>
    <td align="right">DPS: <input align="right" width="30" type="number" id="dps_num" value="4" /><p id="max_dps"></p></td>
    <td align="right">Healers: <input align="right" width="30" type="number" id="heal_num" value="2" /><p id="max_heals"></p></td>

由於以下代碼，從下拉列表中選擇一個選項后，所有這些字段都應計算並動態更改：

function checkPpl(obj) {
    var input = document.getElementById("other_ppl");
    input.disabled = obj.value != "0";
}

function setMinMax(obj) {
    var num_tanks = document.getElementById("tanks_num");
    var num_dps = document.getElementById("dps_num");
    var num_heal = document.getElementById("heal_num");

    var max_tanks = document.getElementById("max_tanks");
    var max_dps = document.getElementById("max_dps");
    var max_heals = document.getElementById("max_heals");
    if($(this).value == '8')
    {
        num_tanks.setAttribute("value", 2);
        num_tanks.setAttribute("max", 2);
        max_tanks.innerHTML = "Maximum: " + (num_tanks.value);

        num_dps.setAttribute("value", 4);
        num_dps.setAttribute("max", 4);

        num_heal.setAttribute("value", 2);
        num_heal.setAttribute("max", 2);
    }
    else if ($(this).value == '16')
    {
        num_tanks.setAttribute("value", 2);
        num_tanks.setAttribute("max", 2);
        max_tanks.innerHTML = "Maximum: " + (num_tanks.value);

        num_dps.setAttribute("value", 10);
        num_dps.setAttribute("max", 10);

        num_heal.setAttribute("value", 4);
        num_heal.setAttribute("max", 4);
    }
}

問題是此腳本無法正常工作。 在“坦克”字段旁邊沒有顯示任何數據（帶有

屬性）輸入字段中的值沒有更改，說實話，我不知道此腳本是否有效。 通常我不使用Javascript / jQuery，因為我對這些語言的了解不足以滿足我的需求，但是我慢慢地嘗試學習它，這是我從頭開始編寫的第一個腳本。 請幫我解決這個問題。 先感謝您。

Answer 1

函數的參數名為obj ，而不是this ，因此您應該使用它來獲取值。 而且.value是DOM屬性，而不是jQuery屬性，因此您不應該使用$()包裝它。

function setMinMax(obj) {
    var num_tanks = document.getElementById("tanks_num");
    var num_dps = document.getElementById("dps_num");
    var num_heal = document.getElementById("heal_num");

    var max_tanks = document.getElementById("max_tanks");
    var max_dps = document.getElementById("max_dps");
    var max_heals = document.getElementById("max_heals");
    if(obj.value == '8')
    {
        num_tanks.setAttribute("value", 2);
        num_tanks.setAttribute("max", 2);
        max_tanks.innerHTML = "Maximum: " + (num_tanks.value);

        num_dps.setAttribute("value", 4);
        num_dps.setAttribute("max", 4);

        num_heal.setAttribute("value", 2);
        num_heal.setAttribute("max", 2);
    }
    else if (obj.value == '16')
    {
        num_tanks.setAttribute("value", 2);
        num_tanks.setAttribute("max", 2);
        max_tanks.innerHTML = "Maximum: " + (num_tanks.value);

        num_dps.setAttribute("value", 10);
        num_dps.setAttribute("max", 10);

        num_heal.setAttribute("value", 4);
        num_heal.setAttribute("max", 4);
    }
}

Answer 2

這就是完成您的任務的代碼更改。

<script>
   $(document).ready(function(){
       // On selecting an option in select dropdown
       $("#ppl_select").change(function(){
           var selectedValue = $(this).val();  // Get value of selected option

           if(selectedValue == "0"){   // if selected option is 0 (other)
              $("#other_ppl).removeAttr("disabled"); // Enable other people textbox
           }

           setMinMax(selectedValue); // Now call your setMinMax function passing with
                                     // selected option value
        });
   });


    function setMinMax(value) {
        var num_tanks = document.getElementById("tanks_num");
        var num_dps = document.getElementById("dps_num");
        var num_heal = document.getElementById("heal_num");

        var max_tanks = document.getElementById("max_tanks");
        var max_dps = document.getElementById("max_dps");
        var max_heals = document.getElementById("max_heals");
        if(value == '8')
        {
            num_tanks.setAttribute("value", 2);
            num_tanks.setAttribute("max", 2);
            max_tanks.innerHTML = "Maximum: " + (num_tanks.value);

            num_dps.setAttribute("value", 4);
            num_dps.setAttribute("max", 4);

            num_heal.setAttribute("value", 2);
            num_heal.setAttribute("max", 2);
        }
        else if(value == '16')
        {
            num_tanks.setAttribute("value", 2);
            num_tanks.setAttribute("max", 2);
            max_tanks.innerHTML = "Maximum: " + (num_tanks.value);

            num_dps.setAttribute("value", 10);
            num_dps.setAttribute("max", 10);

            num_heal.setAttribute("value", 4);
            num_heal.setAttribute("max", 4);
        }
    }
</script>