Jalon2015
Jalon2015
  • 发布:2015-06-16 20:54
  • 更新:2015-06-16 22:53
  • 阅读:3960

真机运行提示错误:Cannot call method 'addEventListener' of null at index1.html:25

分类:HBuilder

我看以前有人出过这个错误,说是语法错误,我这找了没找见语法错误,代码如下

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
//----------- 创建子页面:一个index.html和一个main.html  ---------------  
/*  
 * mui.init({  
    subpages:[{  
      url:'main.html',  
      id:'main.html',  
      styles:{  
        top:'45px',//mui标题栏默认高度为45px;  
        bottom:'0px'//默认为0px,可不定义;  
      }  
    }]  
  });  
 */    

 //---------打开新页面-----------------就是这个位置报的错  
    document.getElementById('main').addEventListener('tap', function() {  
  //打开main.html页面  
  mui.openWindow({  
    url: 'main.html',   
    id:'main'  
  });  
});  

//------------每次页面重新加载时调用------------  
     mui.plusReady(function(){  
            console.log(plus.webview.currentWebview().getTitle());  
        });  

        function clickMe()  
        {  
            alert(plus.webview.currentWebview().getURL());  
        }  
    </script>  
</head>  
<body>    
<h1>  
    <button class="mui-btn mui-btn-primary" onclick="clickMe()">点我</button>   
</h1>  
<h2>  
    <button class="mui-btn mui-btn-primary" onclick="location.reload()">刷新</button>  
</h2>  
<h3>  
    <button id="main" class="mui-btn mui-btn-primary">Tap我</button>  
</h3>  
</body>  
</html>
2015-06-16 20:54 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

这是因为js加载到 document.getElementById('main').addEventListener这行代码时,下方的dom节点尚未生成,故document.getElementById('main')返回为空;

解决方案有两种;
方案1:放入mui.ready中

mui.ready(function(){  
    document.getElementById('main').addEventListener('tap', function() {  
        //打开main.html页面  
        mui.openWindow({  
            url: 'main.html',   
            id:'main'  
        });  
    });  
});

方案2:将如上js代码放到</body>节点之后;

  • Jalon2015 (作者)

    受教受教。为你们的工作态度点赞赞

    2015-06-16 23:27

该问题目前已经被锁定, 无法添加新回复