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

题主这个问题是比较少见的,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>

这样就可以正常调用了

温馨提示:答案为网友推荐,仅供参考
相似回答