一个简单的按钮弹出程序,代码检查了好几遍,就是找不错在哪里啊
运行不了,显示“new1.html:38 Uncaught SyntaxError: Unexpected identifier”
大神帮忙检查下代码,指点一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>0421_DOM0级与DOM2级处理事件</title>
<script type="text/javascript">
function showM(){
alert("Hello world!");
}
//DOM0级处理事件
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
btn2.onclick=function(){
alert('时间2号');};
btn2.onclick=null;
//DOM2级处理事件
//btn3.addEventListener('click',showM,false);
//btn3.attachEvent('onclick',showM);
//解决浏览器兼容性问题
var eventUtil={
//添加句柄
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
//DOM2级处理事件兼容chrome和火狐
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
//DOM2级处理事件兼容IE8以及更早的浏览器版本,只支持事件冒泡
}else{
element['on'+type]=handler;
//DOM0级处理事件element.onclick等价于element['onclick']
}
}
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
}
eventUtil.addHandler(btn3,'click',showM);
</script>
</head>
<body>
<input type="button" value="按钮一" id="btn1" onclick="showM()">
<input type="button" value="按钮二" id="btn2">
<input type="button" value="按钮三" id="btn3">
</body>
</html>
ringa_lee2017-04-11 09:47:28
也就这样了
<input type="button" value="按钮一" id="btn1" onclick="showM()">
<input type="button" value="按钮二" id="btn2">
<input type="button" value="按钮三" id="btn3">
<script type="text/javascript">
function showM(){
alert("Hello world!");
}
//DOM0级处理事件
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
console.log(btn2);
btn2.onclick=function(){
alert('时间2号');
};
btn2.onclick=null;
//DOM2级处理事件
//btn3.addEventListener('click',showM,false);
//btn3.attachEvent('onclick',showM);
//解决浏览器兼容性问题
var eventUtil={
//添加句柄
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
//DOM2级处理事件兼容chrome和火狐
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
//DOM2级处理事件兼容IE8以及更早的浏览器版本,只支持事件冒泡
}else{
element['on'+type]=handler;
//DOM0级处理事件element.onclick等价于element['onclick']
}
},
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
}
eventUtil.addHandler(btn3,'click',showM);
巴扎黑2017-04-11 09:47:28
html元素是自上而下渲染的,如果放在head中,这时候body还没有被渲染,javascript代码操作的对象都没有,报错是很正常的。
<script type="text/javascript"> //最佳实践:script标签放在html文档尾部
window.onload = function(){
//你的代码都放到这里。
}
</script>
巴扎黑2017-04-11 09:47:28
除了上面几位说的问题,还有一个就是在removeHandler这个方法上面的花括号后面要加一个逗号。因为eventUtil 是一个对象。里面有两个方法,所以要加一个逗号,但是一般对象的最后一个属性或者方法不加逗号。
PHP中文网2017-04-11 09:47:28
谢谢几位大神的指点,终于弄好了。
主要调整了两点:
把javascript代码放在body结束标签前,input代码后;
在removeHandler这个方法上面的花括号后面加一个逗号。这个影响挺大的,后来测试了一下,一去掉逗号,马上出问题;逗号加上就好了。
最后,各位回答得都有帮助,因为只能采纳一个答案,决定还是把采纳给到第一个回答问题的人吧。