码迷,mamicode.com
首页 > 其他好文 > 详细

1.1 button点击事件

时间:2016-07-28 15:36:31      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:

中心主题:通过button按钮的点击事件获取到输入值并且将该值显示在下方展示的地方。

一。HTML结构

按照输入框、按钮、输出框进行排列

<div class="clickShowInfoFuc">
    <label>请输入北京今天空气质量:<input id="aqi-input" type="text"></label>
    <button id="button">确认填写</button>

    <div>您输入的值是:<span id="aqi-display">尚无录入</span></div>
</div>

二、css样式

  button{
            width:100px;
            height:25px;
        }
        div{
            width:200px;
            margin:0px auto;
            margin-top:20px;
        }

三、js程序

window.onload=function(){
    var btn= document.getElementById("button");
    btn.onclick=function(){
        var v1=document.getElementById("aqi-input").value;
        document.getElementById("aqi-display").innerHTML=v1;
    };
};

四、最终效果

技术分享

1.1 button点击事件

标签:

原文地址:http://www.cnblogs.com/wuliwuli/p/5714649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!