通过js获取输入框的内容

时间：2025-02-10 08:46:14

思路：首先写上两输入框，一个提交按钮，并且给input标签写上id名（便于在js中通过id名来获取输入框的内容，也可以是其他的名字如：class  name等也可以是自己命的名字）。当用户单击鼠标按钮时，产生onclick事件，同时onclick指定的事件处理程序或代码将被调用执行。就是帮我们实现点击某个元素想要执行某个操作的需求。

<body>
用户名：<input type="text"  /> <br />
密码：<input type="password"  /><br />
<button onclick="huoqu()">按钮</button>
</body>

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 

语法：(id名)

注：取内容的时候不要忘记加上".value"

<script>
    function huoqu() {
        var username = ("username").value;
        var userPsd = ("password").value;
        alert("用户名为：" + username + " " + "密码为：" + userPsd);
    }
</script>

举栗子：计算两个输入框 一个按钮， 点击加按钮的时候 计算两个输入框内容的和
点击减按钮的时候 计算两个输入框内容的差 

<body>
 num1:<input type="text"  /><br /> 
 num2:<input type="text"  /><br />
 <button onclick="sum()">加按钮</button>
 <button onclick="reduce()">减按钮</button>
</body>
function sum() {
    var num1 = ("ipt1").value;
    var num2 = ("ipt2").value;
    var sum = parseInt(num1) + parseInt(num2);
    alert(sum);
}
function reduce() {
    var num1 = ("ipt1").value;
    var num2 = ("ipt2").value;
    var jian = parseInt(num1) - parseInt(num2);
    alert(reduce);
}

相关文章