试图阻止所有表单数据在单击按钮时返回默认值

Question

我遇到了问题，而且 javascript 不是我的强项。我正在制作一个表格，用于保存玩家在游戏中的统计数据，并试图自动执行一些数学运算，每次轮到玩家时，这些数学运算都会在点击时完成。

我成功地完成了第一个代码，在文本框中使用 on-blur 使最大生命值随着衣物的使用和脱下而增加或减少，这段代码工作正常所以我尝试改变它的力量在玩家点击按钮时给出。它基本上是相同的代码设置到以前工作过的不同字段，但不是文本框的模糊，我只是将按钮设置为运行单击时的代码。

<button onclick="pta()">Click on your turn</button>

在所有文本框重置为空或默认值之前，我看到它工作了一瞬间。我用的javascript是

<script>

        function pta()
        {
            var pass1 = parseInt(document.getElementById("pass1").value);
            var pass2 = parseInt(document.getElementById("pass2").value);
        var pass3 = parseInt(document.getElementById("pass3").value);
        var pass4 = parseInt(document.getElementById("pass4").value);
        var car1 = parseInt(document.getElementById("car1").value);
        var car2 = parseInt(document.getElementById("car2").value);
        var car3 = parseInt(document.getElementById("car3").value);
        var car4 = parseInt(document.getElementById("car4").value);
            document.getElementById("aura").value = car1 + car2 + car3 + car4 - pass1  pass2 - pass3 - pass4;

        }
</script>

我看到代码在光环文本框中显示了正确的数字，在一瞬间就起作用了，至少对于加法，还没有尝试过减法，但我相信代码是有效的。我只是很难找到任何方法来阻止单击此功能清除和重置其他所有内容。

此代码提取的所有信息均来自文本框或数字框，预设值至少为“0”。我附上了我正在做的事情的照片。 “health:”和“head-other”的代码将在“Player Max Health”中添加并显示结果，并且没有任何问题。（我在每个框上都有一个单独的脚本，以防止输入数字以外的任何内容防止出现问题）。

我想做的就是把写着“Caroh's”的 4 行加起来，然后把写着“Passive Aura”的 4 行减去那些，然后把它加到任何数字上灵气盒中。我也刚刚意识到我需要将 Aura 文本框添加到要添加的脚本中，但稍后会进行。

非常感谢任何帮助，Javascript 不是我的强项。谢谢

好的，我把代码改成这样了，还是不太确定。好像一切都在提交，所有字段都重置

<script>

    function pta()
    {
        var pass1 = parseInt(document.getElementById("pass1").value);
        var pass2 = parseInt(document.getElementById("pass2").value);
        var pass3 = parseInt(document.getElementById("pass3").value);
        var pass4 = parseInt(document.getElementById("pass4").value);
        var car1 = parseInt(document.getElementById("car1").value);
        var car2 = parseInt(document.getElementById("car2").value);
        var car3 = parseInt(document.getElementById("car3").value);
        var car4 = parseInt(document.getElementById("car4").value);
        var aura = parseInt(document.getElementById("aura").value);
        var ansD = document.getElementById("aura");
        ansD.value = car1 + car2 + car3 + car4 - pass1 - pass2 - pass3 - pass4 + aura;
    }

Answer 1

我认为这里的问题是您正在使用周围的 <form> 标记，如果您只执行 javascript 计算 client-side 并且不回发数据，则可以忽略该标记到服务器。

使用 form 标签，表单内任何 <button> 的 default behaviour 是 submit 所以即使你有一个 onclick 默认值行为仍会触发并提交清除所有字段的表单。

如果您想保留 <form> 并且不希望此特定按钮提交表单，最简单的解决方法是添加 type="button" 例如

<button type="button" onclick="pta()">Click on your turn</button>

试图阻止所有表单数据在单击按钮时返回默认值

Trying to prevent all form data from returning to default on button click

javascript

forms

math

textbox