Javascript - 当函数设置时如何更改表单中的值

Question

我使用的 HTML 表单的输入范围为 1 到 20，并以 10 开头。所以通常您可以单击侧面并向上直到 20 或向下到 1。这没有任何问题，直到我更改了值带有JS函数。

该函数由列表触发，并根据列表的值更新表单。

举个例子，出了什么问题：所有能力在开始时都设置为 10，如果我在列表中选择 Dragonborn，它应该在 STR 处添加 +2，在 CHA 处添加 +1，如果我从列表中选择任何其他条目，则能力是重置为默认值 10。

我遇到的问题是，在我的示例中执行函数后，STR 设置为 12，但无法再手动将其更改为任何其他值，即使这些值可以是 1 到 20 之间的任何值。我无法单击并将其更改为 13 或 11 或任何其他。它将跳回到该函数设置的12。

我需要的是一切都像我现在一样工作，但是当该值设置为 12 时，我可以随后手动将其更改为任何其他值。我用来更新基本值的列表是种族，并且根据种族，默认值可以改变。但如果在我的示例中设置为 12，我需要能够更改。

<table class="table">

                <tr>

                    <th>Ability</th>

                    <th>Score</th>

                    

                </tr>

                <tr>

                    <td>STR: <br>Modifier:

                        <td><input type="number" value="10" min="1" max="20" id="strScore" onchange="updateModifiers()">

                            <input type="number" value="0" id="strMod"></td>

                </tr>

                <tr>

                    <td>DEX: <br>Modifier:

                        <td><input type="number" value="10" min="1" max="20" id="dexScore" onchange="updateModifiers()">

                            <input type="number" value="0" id="dexMod"></td>

                </tr>

                <tr>

                    <td>CON: <br>Modifier:

                        <td><input type="number" value="10" min="1" max="20" id="conScore" onchange="updateModifiers()">

                            <input type="number" value="0" id="conMod"></td>

                </tr>

}

Answer 1

您将在输入元素内的 onchange 函数期间重置值，并将所有内容再次设置为值 reset() 和 pRace() 集。尝试注释掉 updateModifiers() 函数中的第 49 行，该函数应该是 pRace(playerRace)，只有在下拉值更改后才需要设置它。