JavaScript遇到的坑

最新推荐文章于 2021-01-07 20:31:54 发布

DX_Demi

最新推荐文章于 2021-01-07 20:31:54 发布

阅读量827

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/u012209506/article/details/80797382

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript操作DOM元素的常见问题及解决办法，包括getElementById返回null的原因与解决、循环中的局部变量作用域问题及利用闭包解决方法，还有Canvas绘图时的常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、document.getElementById返回为null
今天准备学习下canvas画图，于是呢写了如下代码：
canvas.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../js/canvas.js" ></script>
        <title id="test-canvas">Canvas</title>
    </head>
    <body>
        <canvas id="test-canvas" width="400px" height="600px"></canvas>
    </body>
</html>

canvas.js

var cvs = document.getElementById("testcanvas");
if (cvs.getContext) {
   alert('你的浏览器支持Canvas!');
} else {
   alert('你的浏览器不支持Canvas!');
}
var canvas = cvs.getContext("2d");
canvas.fillStyle ="#dd22dd";
canvas.fillRect(30,30,300,300);

刷新界面报如下错误，说明 cvs是null的。我在想啊，Id我是拷贝过来的，不可能是id值的问题。
这里写图片描述
原来是因为，我们习惯于js文件放在head标签中加载的，而HTML文件是从上到下顺序执行的，所以当然就找不到相对应的元素了。
解决方法：1.在<\script>中添加defer=”true” 属性，延迟加载。
2. 把你的js片段或者加载文件放到<\body>标签结束之后

二、循环中的局部变量，每次使用该值时，都是循环结束时的最后的那个值。
下面举个列子：我要实现动态创建表格的功能，并在点击每个表格时，输出每个表格中的数字和颜色信息。
html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/tab.js" ></script>
        <title>动态表格</title>
    </head>
    <body>
        <h5 style="display:inline;">行数</h5> <input id="rows" style="color: black;width: 100px;height: 20px;"/>
        <h5 style="display:inline;">列数</h5> <input id="cels" style="color: black;width: 100px;height: 20px;"/>
        <input type="button" value="生成表格" onclick="createTable()" style="width: 60px; height: auto;"/>
        <br />
        <h4 id="info"></h4>
        <table id="tab" cellspacing="2" cellpadding="15"></table>
    </body>
</html>

js代码：

function createTable() {
    var rows = document.getElementById("rows");
    var cels = document.getElementById("cels");
    var table = document.getElementById("tab");
    var colors = ["red", "green", "royalblue", "yellow", "pink", "blue", "aqua", "brown"];
    while(table.childElementCount > 0) {
        table.removeChild(table.children[0]);
    }
    if(!checkNumber(rows.value)||!checkNumber(cels.value)||parseInt(rows.value) <= 0 || parseInt(rows.value) > 100 || parseInt(cels.value) <= 0 ||parseInt(cels.value) > 100) {
        alert("请输入1到100之间的数字，谢谢合作！");
        return
    }
    for(var i = 0; i < rows.value; i++) {
        var tr = document.createElement("tr");
        tr.setAttribute("valign", "center");
        for(var j = 0; j < cels.value; j++) {
            var td = document.createElement("td");
            var ran = Math.floor(Math.random() * colors.length);
            td.setAttribute("bgcolor", `${colors[ran]}`);
            td.setAttribute("align", "center");
            td.innerText = (Math.random() * 100 + 1).toFixed(0);
            var num =  td.innerText;
            var color =  td.getAttribute("bgcolor");
                td.onclick = function(){
                var textInfo = document.getElementById("info");
                textInfo.innerHTML = `您选择的区域的数字是: ${num},颜色为 ${color}.`
            }
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
}
//验证字符串是否是整数
function checkNumber(theObj) {
  var reg = /^[0-9]+$/;
  if (reg.test(theObj)) {
    return true;
  }
  return false;
}

运行结果如下：
这里写图片描述
不管我点击表格中的哪一个，都是显示的最后一个方格，数字都是67，颜色为pink.
原来js中没有块作用域。那如何解决这个坑呢？
这就用到函数的闭包了：

function createTable() {
    var rows = document.getElementById("rows");
    var cels = document.getElementById("cels");
    var table = document.getElementById("tab");
    var colors = ["red", "green", "royalblue", "yellow", "pink", "blue", "aqua", "brown"];
    while(table.childElementCount > 0) {
        table.removeChild(table.children[0]);
    }
    if(!checkNumber(rows.value)||!checkNumber(cels.value)||parseInt(rows.value) <= 0 || parseInt(rows.value) > 100 || parseInt(cels.value) <= 0 ||parseInt(cels.value) > 100) {
        alert("请输入1到100之间的数字，谢谢合作！");
        return
    }
    for(var i = 0; i < rows.value; i++) {
        var tr = document.createElement("tr");
        tr.setAttribute("valign", "center");
        for(var j = 0; j < cels.value; j++) {
            var td = document.createElement("td");
            var ran = Math.floor(Math.random() * colors.length);
            td.setAttribute("bgcolor", `${colors[ran]}`);
            td.setAttribute("align", "center");
            td.innerText = (Math.random() * 100 + 1).toFixed(0);
            var num =  td.innerText;
            var color =  td.getAttribute("bgcolor");
            var fclick = function(num,color){
                td.onclick = function(){
                var textInfo = document.getElementById("info");
                textInfo.innerHTML = `您选择的区域的数字是: ${num},颜色为 ${color}.`
            }
            }
            fclick(num,color);
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
}
//验证字符串是否是整数
function checkNumber(theObj) {
  var reg = /^[0-9]+$/;
  if (reg.test(theObj)) {
    return true;
  }
  return false;
}

把值传入进函数中，就不会有问题了！
三、canvas.drawImage() 没效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>让你的图片变灰白</title>
    <script type="text/javascript" src="../js/canvas.js" defer="true"></script>
    </head>
    <body>
        <img src="..\img\sky.jpeg" width="665px"height="500px"/>
        <canvas id="image_gray" width="665px" height="500px" style="background: ghostwhite;"></canvas>
    </body>

</html>

究其原因就是图片还没加载出来就调用了此方法，拿不到数据，所以也就画不出来，可是编译器不报错。。。
解决方法是：

image.onload =function(){
    canvas.drawImage(image,0,0,665,500);
}

在图片加载完成后，再去画。