javascript - js 一个页面上可以有两个function 点击事件吗
本文介绍了javascript - js 一个页面上可以有两个function 点击事件吗的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
会冲突吗 两个function 为什么下面写好上面的点击事件报错
而下面的点击事件一切正常
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>BAT 注册页面</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
</head>
<body>
<div class="tit-box">
<div class="w1">
<div id="wlcom">
<div>欢迎来到BAT团购网</div>
<div class="links1">
<a rel="nofollow" href="">
回到首页
</a>
|
<a rel="nofollow" href="">
下载APP
</a>
|
<a rel="nofollow" href="">
在线客服
</a>
|
<a rel="nofollow" href="">
我的订单
</a>
|
<a rel="nofollow" href="">
联系我们
</a>
|
<a rel="nofollow"href="">
400-133-2877(8:00-20:00)
</a>
</div>
</div>
</div>
</div>
<div class="logo-box">
<div id="logo1">
<a href="">
<img src="img/logo.png" alt="BAT团购网" width="170" height="60">
</a>
<b></b>
</div>
</div>
<div class="xian"></div>
<!-- content开始 -->
<form>
<div class="content-box">
<div class="content">
<div class="content-left">
<div class="tj" style="margin-top: 70px;">
<span> *手机号:</span>
<div class="biank">
<input id="login-num" type="text" class="itxt" value="" placeholder="请输入11位手机号码">
</div>
<div class="input-tip" id="form-account-error"></div>
</div>
<div class="tj">
<span> *验证码:</span>
<div class="biank" style="width: 230px;">
<input id="loginpassword" type="text" class="itxt" value="" placeholder="请输入短信验证码" style="width:230px;">
</div>
<button id="getPhoneCode" class="btn-phonecode" type="button" onclick="checkbox()">获取验证码</button>
<div class="input-tip" id="form-password-error"></div>
</div>
<div class="tj">
<span> *设置密码:</span>
<div class="biank">
<input id="loginpwd" type="text" class="itxt" value="" placeholder="6-15位字母、数字或符号">
</div>
<div class="input-tip" id="form-loginpwd"></div>
</div>
<div class="tj">
<span> *重复密码:</span>
<div class="biank">
<input id="loginpwd-two" type="text" class="itxt" value="" placeholder="6-15位字母、数字或符号">
</div>
<div class="input-tip" id="form-loginpwd-two"></div>
</div>
<div class="tj">
<span>推广员邀请码:</span>
<div class="biank">
<input id="login-yqm" type="text" class="itxt" value="" placeholder="推广员邀请码(必填)">
</div>
<div class="input-tip" id="requestMsg"></div>
</div>
<div class="agreen">
<input type="checkbox" id="checkbox">
<span>我已阅读并同意BAT团购网用户注册协议</span>
</div>
<div class="input-tip" id="requestMsg"></div>
<div class="register-btn"id="register"onclick="checkbox2()">
<a href="javascript:;" class="btn-img btn-entry" >同意协议并提交注册</a>
</div>
<div class="had-box">
<span>已有账户登录</span>
<div><a href="javascript:">立即登录</a></div>
</div>
</div>
<div class="content-right">
<div class="weim-box">
<div class="weim">
<img src="img/weim.png">
</div>
<span>BAT团购网APP下载二维码(android/ios)</span>
<span style="color:#e60012 ">一家联合全国同行一起进货的网站！</span>
</div>
</div>
</div>
</div>
</form>
<!-- content结束 -->
<!-- 底部开始 -->
<div class="w">
<div id="footer-2013">
<div class="links">
<a rel="nofollow" href="">
关于我们
</a>
|
<a rel="nofollow" href="">
法律声明
</a>
|
<a rel="nofollow" href="">
服务协议
</a>
|
<a rel="nofollow" href="">
招贤纳士
</a>
|
<a rel="nofollow" href="">
联系我们
</a>
|
<a rel="nofollow" href="">
友情链接
</a>
|
<a href="">
网站地图
</a>
</div>
<div class="copyright">
增值电信业务经营许可证 浙 B2-20170221 浙ICP备 17031068号-1
</div>
</div>
</div>
<!-- 底部结束 -->
<script type="text/javascript">
function checkbox(){
var number=document.getElementById("login-num");
var msg=document.getElementById("form-account-error");
if(!(/^1[34578]\d{9}$/.test(number.value))){
msg.innerHTML= "<div class=\"input-tip\">请输入正确的手机号码</div>";
return false;
}
else
{
msg.innerHTML="";
}
}
function checkbox2(){
var password=document.getElementById("loginpassword");//手机号码
var register=document.getElementById("register");//提交按钮
var msg=document.getElementById("form-password-error");//手机号码填写红色提示
var loginpwd=document.getElementById("loginpwd");//设置密码
var loginpwdtwo=document.getElementById("loginpwd-two");//重复密码
var loginYqm=document.getElementById("login-yqm");//邀请码
var loginpwdMsg=document.getElementById("form-loginpwd");//设置密码红色提示
var loginpwdtwoMsg=document.getElementById("form-loginpwd-two");//重复密码红色提示
var requestMsg=document.getElementById("requestMsg");//邀请码红色提示
var checkboxz=document.getElementById("checkbox");//复选框
//手机号码验证
if (password.value=="") {
msg.innerHTML= "<div class=\"input-tip\">请输入手机验证码</div>";
return false;
}
else{
msg.innerHTML="";
}
// 密码验证
if(!(/^\w{6,15}$/.test(loginpwd.value))){
loginpwdMsg.innerHTML= "<div class=\"input-tip\">请输入正确的密码</div>";
return false;
}
else
{
loginpwdMsg.innerHTML="";
}
// 没有填写重复密码验证
if (loginpwdtwo.value=="") {
loginpwdtwoMsg.innerHTML= "<div class=\"input-tip\">请输入重复密码</div>";
return false;
}
else
{
loginpwdtwoMsg.innerHTML=""
}
//两次密码不同验证
if (loginpwdtwo.value!=loginpwd.value) {
loginpwdtwoMsg.innerHTML= "<div class=\"input-tip\">两次密码不相同</div>";
return false;
}
else
{
loginpwdtwoMsg.innerHTML=""
}
// 必填邀请码验证
if (loginYqm.value=="") {
requestMsg.innerHTML= "<div class=\"input-tip\">请填写邀请码</div>";
return false;
}
else
{
requestMsg.innerHTML=""
}
//同意协议验证
if (checkboxz.checked=='') {
requestMsg.innerHTML= "<div class=\"input-tip\">请仔细阅读协议并同意</div>";
return false;
}
else{
requestMsg.innerHTML= "";
}
}
</script>
</body>
</html>
解决方案
我能说我把checkbox改成checkbox0,就正常了么= =||
这段代码真的好初级- -，平时基本onclick我们也不会写在html里而是写在script里了。
通过搜索checkbox发现，第一个checkbox的dom下面有一个
<input type="checkbox" id="checkbox">我觉得罪魁祸首就是它，因为我把checkbox2调用处改成checkbox，也能正常调用checkbox【而它和前面那个唯一区别在于一个在input的前面，一个在后面。前者异常，后者正常】，于是我把这个checkbox的input给删了或者把id="checkbox"改成其他，两个onclick都能正常触发了。
我不知道这个罪魁祸首的原理是什么！！！
想给题主提点建议：
提问的时候能贴代码，最好贴上可以复制的代码，特别是前端，这样读者可以自行拷贝去运行，截图什么的，有时候我们看觉得太多也懒得继续对待这个问题了。
命名这个东西呢，能少出现冲突就尽量避免吧，一个id跟一个function一样命名，虽然觉得未尝不可，但有时候感觉还是有点杂~
这篇关于javascript - js 一个页面上可以有两个function 点击事件吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
