再谈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 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
webpack打包优化的几个方法总结
Feb 10 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
js实现纯前端压缩图片
Nov 16 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
分享PHP入门的学习方法
2007/01/02 PHP
php intval的测试代码发现问题
2008/07/27 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
js取得html iframe中的元素和变量值
2014/06/30 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
学校师德承诺书
2014/05/23 职场文书
创先争优演讲稿
2014/09/15 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
通知格式
2015/04/27 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python