Question

script 在没有放表单里正常可以运算。放表单<form>里就不能运算了。

<script type="text/javascript">
function sum(obj) {
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var s = document.getElementById("sum");
if(a.value === "" || b.value === ""|| c.value === "") {
return;
}
s.value = parseInt(a.value) * parseInt(b.value) + parseInt(c.value);
}
</script>
<input type="text" id="a" onkeyup="sum(this);" style="width: 47px" />×
<input type="text" id="b" onkeyup="sum(this);" style="width: 49px" /> +
<input type="text" id="c" onkeyup="sum(this);" style="width: 49px" />=
<input type="text" id="sum" name="ruku" style="width: 50px" />

求大侠帮忙看看问题。谢谢。表单ID是form1

Answer 1

题主这个问题是比较少见的，id 在dom中是比较特别的属性，下面通过chrome自带的调试工具让题主看一下（下面的解答属于代码测试，答题者也没有看过js官方的文档），以此来解答题主的疑惑：

一、首先测试不带form标签的例子

然后通过chrome进行调试：

根据打印结果来看，id为 a、b、c的input标签，直接就被注册成了window域下的变量，每个变量都对应自己所在的标签对象，相当于调用了 var a = document.getElementById("a")，（实际上这种方法适用于所有id，因为id在dom中被标记为唯一）

但是sum 这个例外，因为 sum 在js中被定义过 ，这个id在没有form标签的情况下，并没有像 a、b、c一样被注册为一个全局变量，而是按照 script标签中的 js来定义的

这一种情况适用于 input标签不在form标签中的情况，如果外层有标签，并且标签上带有id的话，只要不是form标签，都会是上面这种情况

二、然后再测试一下带form标签的例子

然后通过chrome进行调试：

注意红线上下内容，因为form标签带有id，id为form1，此时 form1已经被注册到了window于下，因为 这4个input再form标签中，这四个标签的id也分别被注册到了 form1 下面

唯独 sum 比较特别，因为 js中有对sum的定义，所以 window域下的 sum 变量，依然是 script标签中 js定义的sum，但是 form1 作用域下的 id 依然代表个子所在的节点对象

三、通过（一）和（二）不难看出：当js中对sum变量进行定义后，即便下面标签中有同名的id出现，window域下的sum变量依然是 js中定义的sum

最后：题主遇到的问题，实际上也是一个js变量作用域的问题

在form标签中，通过标签属性来调用 js函数：

<form id="form1">

<input type="text" id="a" onkeyup="sum()" />

</form>

写完整了实际上是这样：

<form id="form1">

<input type="text" id="a" onkeyup="form1.sum()" />

</form>

一定要注意 onkeyup中的内容，如果调用方法没有写明作用域，就会在当前作用域去寻找有没有注册过该方法，没有的时候才会遵守向上查找原则

想要正确调用 js 中的sum方法，只需要在sum前面加上对应的作用域即可：

<form>

<script type="text/javascript">

function sum(obj) {

var a = document.getElementById("a");

var b = document.getElementById("b");

var c = document.getElementById("c");

var s = document.getElementById("sum");

if(a.value === "" || b.value === ""|| c.value === "") {

return;

} 

s.value = parseInt(a.value) * parseInt(b.value) + parseInt(c.value);

}

</script>

<input type="text" id="a" onkeyup="window.sum();" style="width: 47px" />×

<input type="text" id="b" onkeyup="window.sum();" style="width: 49px" /> +

<input type="text" id="c" onkeyup="window.sum();" style="width: 49px" />=

<input type="text" id="sum" name="ruku" style="width: 50px" />

</form>

这样就可以正常调用了