搜索

首页  >  问答  >  正文

javascript - DOM事件，看看代码错在哪里(Uncaught SyntaxError: Unexpected identifier)

一个简单的按钮弹出程序，代码检查了好几遍，就是找不错在哪里啊
运行不了，显示“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>
伊谢尔伦伊谢尔伦2773 天前421

全部回复(6)我来回复

  • 伊谢尔伦

    伊谢尔伦2017-04-11 09:47:28

    把你的的script放在body的尾部。

    你的script执行时body里的dom都还没渲染，所以getElementById什么都找不到。

    回复
    0
  • ringa_lee

    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);

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-11 09:47:28

    html元素是自上而下渲染的，如果放在head中，这时候body还没有被渲染，javascript代码操作的对象都没有，报错是很正常的。

    <script type="text/javascript">   //最佳实践：script标签放在html文档尾部
    window.onload = function(){
     //你的代码都放到这里。
    }
</script>

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 09:47:28

    ...........................

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-11 09:47:28

    除了上面几位说的问题，还有一个就是在removeHandler这个方法上面的花括号后面要加一个逗号。因为eventUtil 是一个对象。里面有两个方法，所以要加一个逗号，但是一般对象的最后一个属性或者方法不加逗号。

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 09:47:28

    谢谢几位大神的指点，终于弄好了。
    主要调整了两点：

    1. 把javascript代码放在body结束标签前，input代码后；

    2. 在removeHandler这个方法上面的花括号后面加一个逗号。这个影响挺大的，后来测试了一下，一去掉逗号，马上出问题；逗号加上就好了。

    最后，各位回答得都有帮助，因为只能采纳一个答案，决定还是把采纳给到第一个回答问题的人吧。

    回复
    0
  • 取消回复