老师 总是提示onclick错误 为什么

老师 总是提示onclick错误 为什么

<!DOCTYPE html>

<html>

<head>

<title>视频播放</title>

<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">

*{margin: 0;padding: 0;}

        .wrapNode{width: 530px;height: 320px;margin: 200px auto;background-color: #000;}

.wrapNode video{width: 530px;height: 300px;}

.controlsNode{width: 530px;height: 20px;position: relative;background: url(images/ctrs_bg.gif) repeat-x;}

.PlayNode{width: 13px;height: 15px;background: url(images/playNode.png);position: absolute;top: 50%;left: 13px;margin-top: -7.5px;}

.probg{width: 226px;height: 7px;position: absolute;top: 50%;left: 40px;margin-top: -3.5px;background: url(images/load_bg.png);border-radius: 3px;}

.probgload{width: 50%;height: 100%;border-radius: 3px;background: url(images/line_bg.png);}

.raduis{width: 16px;height: 15px;background: url(images/crl_bg.png);position: absolute;top: 50%;left: 40px;margin-top: -7.5px;z-index: 2;}

.time{width: 152px;height: 12px;position: absolute;top: 50%;left: 282px;margin-top: -6px;line-height: 12px;color: #fff;}

.volumeing{width: 18px;height: 16px;position: absolute;top: 50%;left: 438px;margin-top: -8px;background: url(images/volume_bg.png);}

.volumeing_pro{width: 61px;height: 7px;position: absolute;top: 50%;left:460px;margin-top: -3.5px;background: url(images/volumeLine_bg.png);border-radius: 3px;}

.raduisvolume{left: 460px;}

</style>

</head>

<body>

<div>


<!-- 最外层的盒子 -->

<div class="wrapNode">

<!-- 视频的链接地址 -->

<video src="data/imooc.mp4" poster="data/poster.jpg" class="videoing"></video>



<!-- 控制器元素 -->

<div class="controlsNode">

<!-- 播放暂停按钮 -->

<div class="PlayNode"></div>

<!-- 进度条 -->

<div class="Progressbar">

<!-- 进度条上面的原卷 -->

<div class="raduis"></div>

    <!-- 动起来的进度条 -->

<div class="probg">

<div class="probgload"></div>

</div>

</div>


<!-- 播放时间 -->

<div class="time">

<span>00.00</span>

<span>-</span>

<span>04:30</span>

</div>

            <!-- 喇叭音量 -->


            <div class="volumeing"></div>


             <div class="volumeing_pro">

             

             </div>

             <div class="raduisvolume raduis"></div>


   

</div>



</div>





</div>


<script type="text/javascript">

var PlayNode = document.getElementsByClassName('playNode')[0],

        videoing=document.querySelector('videoing'),

    btnplay=true;


PlayNode.onclick = function(){

       btnplay=!btnplay;

       if (btnplay==false) {

        videoing.play();

       }else{

        videoing.pause();

       }

}

</script>


</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2019-12-14 14:22:34

同学你好, 代码中的其他报错,是因为videoing元素获取也存在错误,建议修改:

http://img1.sycdn.imooc.com//climg/5df47f55090b636d08430102.jpg

老师这里测试没有报错

http://img1.sycdn.imooc.com//climg/5df47f870915d8c413420590.jpg

建议:同学修改之后保存文件,清除浏览器缓存测试一下

如果帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕慕子 2019-12-14 14:04:21

同学你好,针对你的提问,解答如下:

因为获取元素的类名与标签上的类名不一致,没有获取到元素,绑定onclick事件会报错,建议修改:

http://img1.sycdn.imooc.com//climg/5df47b590909ff8d13320601.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 小鲜花 #1
    改成一致了也不可以
    2019-12-14 14:18:10
  • 提问者 小鲜花 #2
    Uncaught TypeError: Cannot set property 'onclick' of null at 抱着个错 加上window.οnlοad=function(){}就不会报错 但是事件无效果
    2019-12-14 14:19:53
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师