我好菜我好菜 2023-03-22 11:16 采纳率: 0%
浏览 32

html button调用函数

这是我的代码,我本来是想要设置一个button调用js实现判断密码跳转页面,但是button不知道为什么一直无法引用js代码,请问这个又什么解决办法吗?


<!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" 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>
  • 写回答

4条回答 默认 最新

  • hfhan_872914334 2023-03-22 11:27
    关注

    onclick="btnAction()"是指点击的时候运行btnAction函数,而你btnAction函数里做了什么,只是重复绑定了点击事件,你应该在这里运行业务逻辑,或者取消onclick="btnAction()",使用下面的addEventListener进行事件绑定

    评论

报告相同问题?

问题事件

  • 创建了问题 3月22日

悬赏问题

  • ¥15 is not in the mmseg::model registry。报错,模型注册表找不到自定义模块。
  • ¥15 安装quartus II18.1时弹出此error,怎么解决?
  • ¥15 keil官网下载psn序列号在哪
  • ¥15 想用adb命令做一个通话软件,播放录音
  • ¥30 Pytorch深度学习服务器跑不通问题解决?
  • ¥15 部分客户订单定位有误的问题
  • ¥15 如何在maya程序中利用python编写领子和褶裥的模型的方法
  • ¥15 Bug traq 数据包 大概什么价
  • ¥15 在anaconda上pytorch和paddle paddle下载报错
  • ¥25 自动填写QQ腾讯文档收集表