为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第14天 仿计算器案例(单击按钮获取到它的值)

一 课程名称:仿计算器案例


    课程章节:计算器0-9的数字显示


二 课程内容


    单击按钮获取到它的值



首先我们把上一节课的代码全部去掉

重新写代码测试一下先

先给某一个数字按钮给一个id n1

https://img1.sycdn.imooc.com//62ff33530001cd1008690344.jpg


获取它的id

var n1= document.getElementById("n1")

在n1里面写一个内置函数 点击后会弹出“dfh”

n1.onclick = function (){
    alert("dfh")
}

测试一下 点击按钮1 显示dfh了

https://img1.sycdn.imooc.com//62ff3b60000197fc11870330.jpg

那我们就可以一下子把input全部找到  

获取所有inpu 把值赋给obutton

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

 然后把obutton数组循环一遍

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

在obutton里写一个内置函数

oButton[i].onclick=function (){
    alert(this.value)
}

this代表你的点击,this.value =返回的是你点击哪个,就会显示哪个按钮的value

https://img1.sycdn.imooc.com//62ff42b90001d6f910270798.jpg


我们现在点击哪个,就会出现哪个按钮的值了

点击6

https://img1.sycdn.imooc.com//62ff454b00011ee513060290.jpg

点击m

https://img1.sycdn.imooc.com//62ff456b0001fd3b13040366.jpg

点击/

https://img1.sycdn.imooc.com//62ff46330001734513980330.jpg

效果出现了,下一节课我们在进行完善


本节结束


三 本章重点是 理解 拿到input把值赋给obutton,写一个内置函数然后实现点击不同的按钮获取不同的值

O(∩_∩)O 





点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
数据库工程师
手记
粉丝
5
获赞与收藏
0

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消