Question

我正在努力学习一些非常基本的Javascript（根本不是Javascript的忠实粉丝或专家！），我无法理解为什么会失败....

我有一些非常基本的HTML标记：

Value 1: <input type="text" id="int1" /> <br />
Value 2: <input type="text" id="int2" /> <br /><br />

<input type="button" name="add" value="Add" onclick="add();" />

然后是一些Javascript：

<script type="text/javascript">
onerror = unhandled;

function unhandled(msg, url, line) {
   alert('There was an unhandled exception');
}

function add() {
   alert($("#int1").val() + $("#int2").val());
}
</script>

从我的（基于Pascal和C＃的）理解，add方法应该读出ID为int1和int2的输入元素中的值并添加这些值，然后显示结果。

看起来基本无害......

但即使我在这两个文本框中输入两个有效整数（如10和20），我仍然会得到一个There was an unhandled exception，而我只是无法了解这里出了什么问题。

有人可以开导我吗？

Answer 1

$.val()返回一个字符串值。您需要将返回的两个字符串转换为数字，然后添加值。

试试这个

function add() {
    alert(parseFloat($('#int1').val()) + parseFloat($('#int2').val()));`
}

Answer 2

这里有一些不同的问题。

首先，如果你正在使用jQuery，最好使用click事件而不是内联函数调用。

其次，值从输入返回为字符串，因此您必须使用 parseInt（）

转换它们

此外，如果您未在此情况下警告错误消息 msg 参数，则错误处理程序无效。

onerror = unhandled;

function unhandled(msg, url, line) {
   alert(msg);
}

$("input[name=add]").click(function() {
   var int1 = parseInt($("#int1").val());
   var int2 = parseInt($("#int2").val());
   alert(int1 + int2);
});

小提琴：http://jsfiddle.net/9bepJ/

Answer 3

首先，.val()将返回一个字符串。加法运算符不会添加这些字符串的数值，它只会连接字符串。

但那并没有导致你的例外。摆脱除添加功能之外的一切。它应该工作。

<script type="text/javascript">
    function add() {
       alert($("#int1").val() + $("#int2").val());
    }
</script>

当然，这是假设您包含了jQuery库，因为$（）函数的来源就是这样。

Answer 4

尝试使用绑定onclick事件，而不是内联编写。我为你做了小提琴。看看

更新：

http://jsfiddle.net/rkhadse_realeflow_com/FhL9g/7/

  <script>
function add() {
    var int1 = parseInt(document.getElementById("int1").value);
    var int2 = parseInt(document.getElementById("int2").value);
    alert(int1 + int2);
}
    </script>

  Value 1:
<input type="text" id="int1" />
<br />Value 2:
<input type="text" id="int2" />
<br />
<br />
<button onclick="add()">Add</button>

Answer 5

由于您似乎正在使用$(..)函数，因此请确保在使用这些函数之前在页面上包含jQuery。

除此之外，当我将事件处理程序放在HTML属性中时，我总是会遇到范围问题。尝试将它们放入您的代码中，这样可以获得不引人注目的JavaScript（一种更清晰，更易于维护的代码的新模式）。

另外，在按钮上添加id：

<input type="button" name="add" value="Add" id="myButton" />

在代码中添加事件处理程序并从按钮中删除onclick属性

document.getElementById('myButton').onclick = add;

即使是最基本的Javascript也失败了 - 但为什么呢？

5 个答案: