html button调用函数
这是我的代码，我本来是想要设置一个button调用js实现判断密码跳转页面，但是button不知道为什么一直无法引用js代码，请问这个又什么解决办法吗？
html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
margin: 0;
padding: 0;
}
/*更改默认值*/
html,body{
width: 100%;
padding: 100%;
}
/*添加背景图片*/
body {
background: url(3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*输入框居中*/
.loginFrame{
width: 500px;
height: 350px;
background: rgba(176, 173, 173, 0.3);
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/*添加边框圆角*/
border-radius: 10px;
/*添加边距*/
padding: 50px 0;
box-sizing: border-box;
/*添加阴影*/
box-shadow: 0 0 5px 5px rgba(30, 30, 30, 0.4);
}
/*改变盒子用户位置*/
.loginFrame>div.user{
width: 150px;
height: 30px;
margin: 40px auto;
/*改变字体颜色*/
color: white;
font-family: 华文中宋;
font-size:small;
}
/*改变盒子密码位置*/
.loginFrame>div.password{
width: 150px;
height: 30px;
margin: 40px auto;
/*改变字体颜色*/
color: white;
font-family: 华文中宋;
font-size: small;
}
/*标题居中并改颜色*/
.loginFrame>p{
text-align: center;
color: white;
font-size: 35px;
font-family: Monotype Corsiva;
}
/*改变输入框文字*/
.loginFrame>div span{
display: inline-block;
cursor: pointer;
font-family: 华文中宋;
font-size: 15px;
}
/*改变输入框样式*/
.loginFrame>div input{
width: 100%;
height: 30px;
/*透明色*/
background: transparent;
/*清除默认边框*/
border: none;
/*添加底部边框*/
border-bottom: 1px solid white;
/*清除蓝色点击框*/
outline: none;
/*改变文字颜色*/
color: white;
}
/*给输入框提醒文字变色*/
input::-webkit-input-placeholder{
color: #919ba7;
}
/*改变登录按钮样式*/
button{
width: 100px;
height: 30px;
/*添加圆角*/
border-radius: 50px;
/*设置背景颜色*/
background-image: linear-gradient(to right,#82b0eb,#7199c3);
text-align: center;
padding-top: border-box;
font-size: 20px;
cursor: pointer;
/*清除边框*/
border: none;
color: white;
font-family: 华文中宋;
font-size: 15px;
}
/*改变按钮位置*/
.loginFrame>div.enterBut{
text-align: center;
}
/*给登录按钮添加鼠标效果*/
button:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)inset;
}
/*适配*/
svg{
vertical-align: middle;
}
style>
head>
<body >
<div class="main">
<div class="loginFrame">
<p class="loginTitle">Loginp>
<div class="user">
<laber>
<span>
<svg t="1679291457700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25326" width="15" height="15"><path d="M514.133333 433.066667c-102.4 0-187.733333-83.2-187.733333-187.733334 0-102.4 83.2-187.733333 187.733333-187.733333s187.733333 83.2 187.733334 187.733333c0 102.4-85.333333 187.733333-187.733334 187.733334z m0-311.466667c-68.266667 0-123.733333 55.466667-123.733333 123.733333 0 68.266667 55.466667 123.733333 123.733333 123.733334s123.733333-55.466667 123.733334-123.733334c0-68.266667-55.466667-123.733333-123.733334-123.733333z" fill="#ffffff" p-id="25327">path><path d="M689.066667 994.133333H339.2c-142.933333 0-260.266667-117.333333-260.266667-260.266666s117.333333-260.266667 260.266667-260.266667h352c142.933333 0 260.266667 117.333333 260.266667 260.266667S832 994.133333 689.066667 994.133333zM339.2 539.733333c-106.666667 0-196.266667 87.466667-196.266667 196.266667s87.466667 196.266667 196.266667 196.266667h352c106.666667 0 196.266667-87.466667 196.266667-196.266667s-87.466667-196.266667-196.266667-196.266667H339.2z" fill="#ffffff" p-id="25328">path>svg>
span>
<span>用户名span>
<input type="text" placeholder="username" value="">
laber>
div>
<div class="password">
<laber>
<span>
<svg t="1679291535483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26455" width="15" height="15"><path d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z" fill="#ffffff" p-id="26456">path>svg>
span>
<span>密 码span>
<input type="password" placeholder="password" value="">
laber>
div>
<div class="enterBut">
<a href="D:\web1\Untitled-3.html">
<button type="button" id="chkBtn" onclick="btnAction()">登入button>
a>
div>
<script type="text/javascript">
function btnAction(){
document.getElementById('chkBth').addEventListener('click',function(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username=='admin'&&password=='admin'){
window.location.href='D:\web1\Untitled-3.html';
}else{
alert('抱歉，用户名或密码错误！');
}
})
}
script>
div>
div>
body>
html>
onclick="btnAction()"是指点击的时候运行btnAction函数，而你btnAction函数里做了什么，只是重复绑定了点击事件，你应该在这里运行业务逻辑，或者取消onclick="btnAction()"，使用下面的addEventListener进行事件绑定
a标签和button冲突了，button在a标签里面，始终都是触发a标签而不会触发button按钮的onclick的，你应该把button上层的a标签去掉，onclick和addEventListener也重复了，去掉onclick="btnAction()"或者js中去掉addEventListener事件监听，还有input缺少了id，完整修改如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
/*更改默认值*/
html,body{
width: 100%;
padding: 100%;
}
/*添加背景图片*/
body {
background: url(3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*输入框居中*/
.loginFrame{
width: 500px;
height: 350px;
background: rgba(176, 173, 173, 0.3);
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/*添加边框圆角*/
border-radius: 10px;
/*添加边距*/
padding: 50px 0;
box-sizing: border-box;
/*添加阴影*/
box-shadow: 0 0 5px 5px rgba(30, 30, 30, 0.4);
}
/*改变盒子用户位置*/
.loginFrame>div.user{
width: 150px;
height: 30px;
margin: 40px auto;
/*改变字体颜色*/
color: white;
font-family: 华文中宋;
font-size:small;
}
/*改变盒子密码位置*/
.loginFrame>div.password{
width: 150px;
height: 30px;
margin: 40px auto;
/*改变字体颜色*/
color: white;
font-family: 华文中宋;
font-size: small;
}
/*标题居中并改颜色*/
.loginFrame>p{
text-align: center;
color: white;
font-size: 35px;
font-family: Monotype Corsiva;
}
/*改变输入框文字*/
.loginFrame>div span{
display: inline-block;
cursor: pointer;
font-family: 华文中宋;
font-size: 15px;
}
/*改变输入框样式*/
.loginFrame>div input{
width: 100%;
height: 30px;
/*透明色*/
background: transparent;
/*清除默认边框*/
border: none;
/*添加底部边框*/
border-bottom: 1px solid white;
/*清除蓝色点击框*/
outline: none;
/*改变文字颜色*/
color: white;
}
/*给输入框提醒文字变色*/
input::-webkit-input-placeholder{
color: #919ba7;
}
/*改变登录按钮样式*/
button{
width: 100px;
height: 30px;
/*添加圆角*/
border-radius: 50px;
/*设置背景颜色*/
background-image: linear-gradient(to right,#82b0eb,#7199c3);
text-align: center;
padding-top: border-box;
font-size: 20px;
cursor: pointer;
/*清除边框*/
border: none;
color: white;
font-family: 华文中宋;
font-size: 15px;
}
/*改变按钮位置*/
.loginFrame>div.enterBut{
text-align: center;
}
/*给登录按钮添加鼠标效果*/
button:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)inset;
}
/*适配*/
svg{
vertical-align: middle;
}
</style>
</head>
<body >
<div class="main">
<div class="loginFrame">
<p class="loginTitle">Login</p>
<div class="user">
<laber>
<span>
<svg t="1679291457700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25326" width="15" height="15"><path d="M514.133333 433.066667c-102.4 0-187.733333-83.2-187.733333-187.733334 0-102.4 83.2-187.733333 187.733333-187.733333s187.733333 83.2 187.733334 187.733333c0 102.4-85.333333 187.733333-187.733334 187.733334z m0-311.466667c-68.266667 0-123.733333 55.466667-123.733333 123.733333 0 68.266667 55.466667 123.733333 123.733333 123.733334s123.733333-55.466667 123.733334-123.733334c0-68.266667-55.466667-123.733333-123.733334-123.733333z" fill="#ffffff" p-id="25327"></path><path d="M689.066667 994.133333H339.2c-142.933333 0-260.266667-117.333333-260.266667-260.266666s117.333333-260.266667 260.266667-260.266667h352c142.933333 0 260.266667 117.333333 260.266667 260.266667S832 994.133333 689.066667 994.133333zM339.2 539.733333c-106.666667 0-196.266667 87.466667-196.266667 196.266667s87.466667 196.266667 196.266667 196.266667h352c106.666667 0 196.266667-87.466667 196.266667-196.266667s-87.466667-196.266667-196.266667-196.266667H339.2z" fill="#ffffff" p-id="25328"></path></svg>
</span>
<span>用户名</span>
<input type="text" id="username" placeholder="username" value="">
</laber>
</div>
<div class="password">
<laber>
<span>
<svg t="1679291535483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26455" width="15" height="15"><path d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z" fill="#ffffff" p-id="26456"></path></svg>
</span>
<span>密 码</span>
<input type="password" id="password" placeholder="password" value="">
</laber>
</div>
<div class="enterBut">
<button type="button" id="chkBtn" onclick="btnAction()">登入</button>
</div>
<script type="text/javascript">
function btnAction(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username=='admin'&&password=='admin'){
window.location.href='D:\web1\Untitled-3.html';
}else{
alert('抱歉，用户名或密码错误！');
}
}
</script>
</div>
</div>
</body>
</html>
效果如下：
你的代码问题：
你在button上已经使用 onclick了 所以不用再给 这个button添加addEventListener的click了 直接就行了
- 关于标签使用
a标签 包裹button标签 ，表示的是给button按钮添加了一个链接 ，点击直接跳走了
你的需求是 点击了按钮之后 要进行判断 ，所以a标签别用了
参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
- 关于
document.getElementById("username")Document的方法getElementById()返回一个匹配特定 ID的元素。
你的代码里input没有加id
<input type="text" placeholder="username" value="">
<input type="password" placeholder="password" value="">
<input type="text" placeholder="username" value="" id="username">
<input type="password" placeholder="password" value="" id="password">
- 你的
document.getElementById('chkBth')里的登录button得id名也写错了 是 chkBtn 吧
<button type="button" id="chkBtn" onclick="btnAction()">登入</button>
function btnAction() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == 'admin' && password == 'admin') {
// window.location.href = 'D:\web1\Untitled-3.html';
alert("登录成功！")
} else {
alert('抱歉，用户名或密码错误！');
}
}
<button type="button" id="chkBtn">登入</button>
document.getElementById('chkBtn').addEventListener('click', function () {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == 'admin' && password == 'admin') {
// window.location.href = 'D:\web1\Untitled-3.html';
alert("登录成功！")
} else {
alert('抱歉，用户名或密码错误！');
}
})
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7766462