再谈javascript常见错误及解决方法


Posted in Javascript onSeptember 16, 2016

初学Javascript,每天总是被很小的问题折磨半天,今晚就有好几个小问题。

第一:全部使用双引号造成匹配错误

<input type="checkbox" onmouseover="document.getElementById("test").style.display="none":"/>

改行一直报错误:unexpected toke “}”  检查半天也没有发现错误,对照发现视频上是使用单引号

<input type="checkbox" onmouseover="document.getElementById('test').style.display="none":"/>

改成单引号后错误总算消除,困扰我一夜晚。。附上链接http://www.cnblogs.com/chinabc/archive/2010/11/19/1881947.html

第二:错误添加分号

<div id="test" class="test1" onmouseover="toYellow()" ;onmouseout="toRed()";>change</div>

多写了一个分号,导致分号后的代码不执行

第三:函数名后多写括号

<script> 
  function toYellow(){ 
    document.getElementById("test").className="test2"; 
    } 
  function toRed(){ 
     document.getElementById("test").className="test1"; 
    } 
  document.getElementById("test").onmouseover=toYellow(); 
  document.getElementById("test").onmouseout=toRed(); 
</script>

却掉 toYellow()和 toRed()后的括号后正常执行

第四:checkbox的checked属性修改

用三个按钮实现checkbox的全选、全部选、反选。

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
  </head> 
  <body> 
    <button id="btn">全选</button> 
    <button id="nobtn">全不选</button> 
    <button id="inverse">反选</button><br /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <input type="checkbox" /> 
    <script> 
      var btn=document.getElementById("btn"); 
      var input=document.getElementsByTagName("input"); 
      btn.onclick=function(){ 
        for(var i=0;i<input.length;i++){ 
          input[i].checked="checked"; 
        } 
      } 
      var nobtn=document.getElementById("nobtn"); 
      nobtn.onclick=function(){ 
        for(var i=0;i<input.length;i++){ 
          input[i].checked=false; 
        } 
      } 
      var inverse=document.getElementById("inverse"); 
      inverse.onclick=function(){ 
        for(var i=0;i<input.length;i++){ 
          if(input[i].checked==false){ 
            input[i].checked=true; 
          }else{ 
            input[i].checked=false; 
          } 
        } 
      } 
    </script> 
  </body> 
</html>

以上这篇再谈javascript常见错误及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
Javascript实现计算个人所得税
May 10 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 #Javascript
浅谈jQuery效果函数
Sep 16 #Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 #Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 #Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 #Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 #Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 #Javascript
You might like
MySQL中create table语句的基本语法是
2007/01/15 PHP
Yii分页用法实例详解
2014/12/04 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
了解重排与重绘
2019/05/29 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Python解惑之True和False详解
2017/04/24 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python英语单词测试小程序代码实例
2019/09/09 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python新手学习raise用法
2020/06/03 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
印刷工程专业应届生求职信
2013/09/29 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
项目采购员岗位职责
2014/04/15 职场文书
纠纷协议书
2014/04/16 职场文书
中国梦团日活动总结
2014/07/07 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
春风化雨观后感
2015/06/11 职场文书
初二物理教学反思
2016/02/19 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
详解Python牛顿插值法
2021/05/11 Python
nginx容器方式反向代理实战
2022/04/18 Servers