js触发onclick事件获取文本框中的值value

编程笔记in

已于 2025-04-23 13:47:54 修改

阅读量4.8k

点赞数 2

分类专栏：其他杂项文章标签： js javascript html5

于 2021-04-30 22:48:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43626218/article/details/116310208

版权

其他杂项专栏收录该内容

4 篇文章

订阅专栏

1.首先我们创建一到两个文本框，使用 <input >标签

<!--创建文本框：  type：类型， value：初始值，可以不设置  id：唯一性-->
    用户名： <input type="text" value="admin" id="name">
    密  码： <input type="text" value="123456" >

2.接着我们创建script代码，创建函数获取文本框中的值，获取值是通过文本框的id获取的，使用到了<script> 标签

<!--创建script-->
<script type="text/javascript">

    /** 创建函数*/
    function onclickFun(){

        /*通过id获取元素*/
        var user= document.getElementById("name")

        /*警示窗口*/
        alert("你好【"+user.value+"】，欢迎进入系统");

    }

</script>

3.全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--创建文本框：  type：类型， value：初始值，可以不设置  id：唯一性-->
    用户名： <input type="text" value="admin" id="name">
    密  码： <input type="text" value="123456" >
    <!--创建按钮，单击按钮触发事件执行函数-->
    <button onclick="onclickFun()"> 登录</button>
</div>
</body>
</html>
<!--创建script-->
<script type="text/javascript">
    /** 创建函数*/
    function onclickFun(){
        var user= document.getElementById("name")
        alert("你好【"+user.value+"】，欢迎进入系统");
    }
</script>