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

时间:2014-01-14 01:14:37

标签: 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>");
});

提前感谢您的帮助!

修改:我将代码更新为工作版本。

2 个答案:

答案 0 :(得分:1)

用html()替换replaceWith()。我有 DEMO 正在工作:

$("#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);
});

答案 1 :(得分:1)

它似乎运作良好:fiddle

但请注意,如果您想将输入操作为数字,则应编写

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