JavaScript遇到的坑

一、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);
}

在圖片加載完成後,再去畫。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章