测试一:获取输入内容
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function mylogin(){
//alert("Please enter")
var input_node = document.getElementById("user_name")
var show_node = document.getElementById("show")
console.log(input_node.value)
show_node.innerHTML += input_node.value
show_node.innerHTML += "<br>"
}
</script>
<div id="show" style="width: 100px; height:100px;background-color: aqua;">
</div>
<form>
用户名:<input type="text" id="user_name" value="lkmao"/><br />
<input type="button" value="提交" onclick="mylogin()"/><br />
</form>
<button onclick="mylogin()">按钮1</button>
</body>
</html>
测试结果:这里两个按钮可以达到相同的效果。
测试二:将输入的用户名显示到页面欢迎部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var last_user="";
function mylogin(){
//alert("Please enter")
var input_node = document.getElementById("user_name")
var show_node = document.getElementById("show")
console.log(input_node.value)
if(input_node.value.length == 0){
alert("Please enter user name")
return
}
show_node.innerHTML += input_node.value
show_node.innerHTML += "<br>"
var welcome_msg = document.getElementById("welcome_msg").innerText
console.log(welcome_msg)
if(last_user.length == 0){
var new_welcome_msg = welcome_msg.replace(/xxx/g,input_node.value)
document.getElementById("welcome_msg").innerHTML = new_welcome_msg;
last_user = input_node.value
}else{
var new_welcome_msg = welcome_msg.replace(last_user,input_node.value)
document.getElementById("welcome_msg").innerHTML = new_welcome_msg;
last_user = input_node.value
}
}
</script>
<div id="show" style="width: 100px; height:100px;background-color: aqua;">
</div>
<div id = "welcome_msg">
用户 xxx 登录了
</div>
<form>
用户名:<input type="text" id="user_name" value="lkmao"/><br />
<input type="button" value="提交" onclick="mylogin()"/><br />
</form>
<button onclick="mylogin()">按钮1</button>
</body>
</html>