JS学习自我纠错笔记

最新推荐文章于 2024-04-26 16:47:03 发布

陶甜也

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量179

点赞数

分类专栏：纠错文章标签： javascript css html

本文链接：https://blog.csdn.net/TTianYe/article/details/111146042

版权

纠错专栏收录该内容

4 篇文章 0 订阅

订阅专栏

错误

1、逻辑错误
（1）代码书写位置不对，应该搞清楚是动作执行之前执行还是动作执行之后执行代码。
例如：

<script>
    // 加法计算器
    // 获取元素
    var num1 = document.getElementById('num1');
    var num2 = document.getElementById('num2');
    var num3 = document.getElementById('num3');
    var btn = document.getElementById('btn');

        var a = num1.value;
        var s = Number(a);
        var b = num2.value;
        var c = Number(b);
    // 点击 计算
    btn.onclick = function () {
        num3.value = s + c;
    }
</script>——————————错

<script>
        // 加法计算器
        // 获取元素
        var num1 = document.getElementById('num1');
        var num2 = document.getElementById('num2');
        var num3 = document.getElementById('num3');
        var btn = document.getElementById('btn');

        // 点击 计算
        btn.onclick = function () {
            var a = num1.value;
            var s = Number(a);
            var b = num2.value;
            var c = Number(b);
            num3.value = s + c;
        }
    </script>——————————对

2、使用方法时用错对象
例如：使用isNaN（）时，写成isNaN（input的id名），应该是对表单元素的内容（即value值）进行判断是否是纯数字类型，而不是对表单进行判断，所以正确的写法为：isNaN（input的id名对应的变量.value）

例如：
HTML：
<input type="text" id="cont">
JS：
var cont  = document.getElementById("cont");
var a = inNaN(cont);   ——————————错
var a = inNaN(cont.value);   ——————————对

3.使用属性时找错对象
例如 input的id名为box

var box = document.getElementById("box");
var a = box.length;(错)
box：length   ——————————错
box.value.length  ——————————对

4、拼写错误
提示错误的时候，不止是要找提示的位置，有可能是提示内容的附近
例如：提示错误：SyntaxError: Unexpected token ‘{’
实际错误是：t.onclick = functiona () {} 中的function写错成functiona

5、在使用class名字获取元素的时候（即使用：getElementsByClassName），就算是只有一个元素使用了这个class名称，得到的都是一个伪数组，使用时都需要指定下标。
例如：
在HTML中：

<body>
<input class="num1" type="text" >//只有一个元素使用了 class="num1"
</body>
错误的：
var num1 = document.getElementsByClassName("num1");
var a = num1.value;

正确的：
var num1 = document.getElementsByClassName("num1");
var a = num1[0].value;

6、js中给标签添加空格，和html中一样，使用_ 

box[0].innerHTML += "      ";------------错
box[0].innerHTML += "&nbsp;";------------对

7、JS中的转义符
JS中的反斜线代表转义的意思，如JS中的常见转义字符有：

  \n ==> 换行
  \t ==> 制表符 
  \' ==> 单引号 
  \"" ==> 双引号 
  \\ ==>反斜线（\） 
  \\\\ ==> 两个反斜线（\\）

8、js严格区分大小写

Window.onload = function () {}——————————错

控制台不报错，但是代码不会被执行，这样的情况很难找到错误所在。需要注意

window.onload = function () {}——————————对

9、当出现报错，然后在JS代码中没有找出，应该去看看HTML中结构中
比如报错undefined；
错误在JS中没找到，错误出现在html中
例如：
JS中：box使用时报错为undefined，但是JS中没错
错误在HTML的结构上：

<span></span class="box">——————————错 
<span class="box"></span>——————————对

所以在JS中获取不到box

总结

1、逻辑上需要考虑清楚，什么时候获取需要的值；
2、注意不必要的错误：单词拼写，选择器加错位置，
3、获取内容要区分是表单还是闭合标签。

陶甜也

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS学习自我纠错笔记

错误1、逻辑错误（1）代码书写位置不对，应该搞清楚是动作执行之前执行还是动作执行之后执行代码。例如：<script> // 加法计算器 // 获取元素 var num1 = document.getElementById('num1'); var num2 = document.getElementById('num2'); var num3 = document.getElementById('num3'); var btn = docu
复制链接

扫一扫