Javascript 我的JQuery脚本没有检索表单文本值

我试图从表单中获取数据，并使用这些值获得最终结果

问题是（至少在调试时是这样）没有值被重试并存储在我创建的变量中

以下是表格：

<form>
    <p>
       <label for="numDigits">Number of Digits: </label>
       <input type="text" id="numDigits" name="numDigits" />
    </p>
    <p>
        <label for="num1">First Number: </label>
        <input type="text" id="num1" name="num1" />
    </p>
    <p>
        <label for="num2">Second Number: </label>
        <input type="text" id="num2" name="num2" />
    </p>
    <p>
        <label for="num3">Third Number: </label>
        <input type="text" id="num3" name="num3" />
    </p>
    <p>
        <input type="button" name="calc" id="calc" value="Calculate" />
    </p>
    <p id="result">Result will be displayed here when the button is pressed.</p>
</form>

位数：


第一个号码：


第二个号码：


第三个号码：



按下按钮时，结果将显示在此处

还有JQuery脚本

$("#calc").on('click', function(){
    var a = Number($("#numDigits").val());
    var x = Number($("#num1").val());
    var y = Number($("#num2").val());
    var z = Number($("#num3").val());

    var total = a * 3 + x + ((a + x - y) % a) + ((a + z - y) % a);
    $("#result").html("<p class='id'>" + total + "</p>");
});

$（“#计算”）。在（'click'，function（）上{
var a=数字（$（“#numDigits”）.val（）；
var x=数字（$（“#num1”）.val（））；
变量y=数字（$（“#num2”）.val（）；
var z=数字（$（“#num3”）.val（））；
var总计=a*3+x+（（a+x-y）%a+（（a+z-y）%a）；
$（“#result”）.html（“
”+total+”
”；
});

提前感谢您的帮助

编辑：我将代码更新为工作版本。

将replaceWith（）替换为html（）。我让工作：

$("#calc").click(function(){
var a = $("#numDigits").val();
var x = $("#num1").val();
var y = $("#num2").val();
var z = $("#num3").val();

var total = a * 3 + x;
total += ((y - x) % a);
total += ((y - z) % a);
$("#result").html(total);
});

它似乎运行良好：

但是请注意，如果您想将输入作为数字进行操作，那么应该编写

var a = Number($("#numDigits").val());
var x = Number($("#num1").val());
var y = Number($("#num2").val());
var z = Number($("#num3").val());

---

你到底是如何调试代码的？似乎对我来说“有效”（至少我得到了输出）：。我在WebStorm中调试，发现没有分配任何值。Firefox中出现的奇怪数字和Chrome中出现的-1显然是NaN或其他原因造成的。事实证明，我需要将VAL转换为数字，但HTML建议确实有助于在每次运行脚本时更新结果。谢谢