这个点击事件为什么我不可以这样写

这个点击事件为什么我不可以这样写

html代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="index.css">

</head>

<body onload="init()">

<div id="div1">

<div id="div2">

<input type="text" name="num" id="num">

</div>

<div id="div3">

<input type="button" name="" value="C">

<input type="button" name="" value="←">

<input type="button" name="" value="+/-">

<input type="button" name="" value="/">

<input type="button" name="" value="1" id="n1">

<input type="button" name="" value="2">

<input type="button" name="" value="3">

<input type="button" name="" value="*">

<input type="button" name="" value="4">

<input type="button" name="" value="5">

<input type="button" name="" value="6">

<input type="button" name="" value="-">

<input type="button" name="" value="7">

<input type="button" name="" value="8">

<input type="button" name="" value="9">

<input type="button" name="" value="+">

<input type="button" name="" value="0">

<input type="button" name="" value=".">

<input type="button" name="" value="=">

<input type="button" name="" value="m">

</div>

</div>

</body>

<script type="text/javascript" src="index.js"></script>

</html>



css代码:


*{

margin: 0px;

padding:0px;

}


#div1{

position: relative;

top: 50px;

left: 50px;

width: 180px;

}


input[type="text"]{

height: 30px;

outline: none;

line-height: 30px;

width: 175px;

text-align: right;

background-color: white;

}


input[type="button"]{

width: 35px;

height: 35px;

margin:3px 3px;

}



javascript代码:

function init(){

var text = document.getElementById("num");

text.value = 0;

text.disabled = "disabled";


var objButton = document.getElementsByTagName("input");


for ( var i = 0; i < objButton.length; i++ ){


var content = objButton[i].value;


objButton[i].onclick = function(){

alert(content);

}

}

}

function init(){

var text = document.getElementById("num");

text.value = 0;

text.disabled = "disabled";


var objButton = document.getElementsByTagName("input");


for ( var i = 0; i < objButton.length; i++ ){


var content = objButton[i].value;


objButton[i].onclick = function(){

alert(content);

}

}

}

http://img1.sycdn.imooc.com//climg/5f4f4aba09f8b17606500313.jpg


为什么我这样写的话,无论按那个键都是弹出最后 "m"的value

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,因为i是objButton的索引,如果在循环外使用就获取不到了

在页面加载完成以后,for循环结束。i的值就是一个不再改变的值了。

比如在代码中增加如下语句:

http://img1.sycdn.imooc.com//climg/5f4f6b1009c4cc8608390226.jpg

页面加载完时已经输出了如下,相当于有了0~20个fuction,每个fuction对应的元素都是当时的i对应的oButton[i]:

http://img1.sycdn.imooc.com//climg/5f4f6b3e0910e71303190476.jpg

所以当点击“1”按钮触发时,this对应的是触发的这个onclick事件的元素,也即是当初的oButton[i]。

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!


好帮手慕阿园 2020-09-02 16:50:43

同学你好,因为onclick事件绑定在了objButton[i]元素上,给按钮添加完点击事件,当页面加载完成的时候,for循环已经结束了,也就是说当加载完成后i的值已经是21了;同学可以alert(i)弹出窗口看一下呦。

但是写成this, this对应的是触发的这个onclick事件绑定的元素,也就是触发时的objButton[i]

所以如果不写成this,代表被触发时的变量,则在function中则objButton[i] 中的i永远是for循环遍历完后最后的值

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!


  • 提问者 AbelZephyr #1
    那为什么还要把点击事件onclick写在for循环里面呢,我打印了alert(i),是从0一直打印到19的
    2020-09-02 16:54:44
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师