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

demo16-打印名字

时间:2020-03-28 23:15:02      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:type   button   click   app   col   btn   doctype   txt   info   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" id="txt"/>
        <input type="button" id="btn" value="打印" />
        <h1 id="app">姓名是:</h1>
    </body>
    <script type="text/javascript">
        //获取按钮标签
        var oBtn = document.getElementById("btn")
        //文本
        var oTxt = document.getElementById("txt")
        // h1标签
        var oApp = document.getElementById("app")
        // 设置点击事件
        oBtn.onclick = function(){
            var val = oTxt.value
            //设置名字,innerHTML 是 修改标签里面的内容
            //具体实现多的效果就是会把之前h1标签显示的"姓名是"这三个字换成下面的val的值加上"姓名是"三个字
            oApp.innerHTML = "姓名是:" + val
            //alert(‘哈哈哈‘)
        }
        
    </script>
</html>
<!--
    打印名片
    回来再看下
    script就是脚本的意思
-->

演示效果:

技术图片

 

demo16-打印名字

标签:type   button   click   app   col   btn   doctype   txt   info   

原文地址:https://www.cnblogs.com/huaibin/p/12589974.html

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