未捕获的ReferenceError：未定义functionName

Question

我使用了这种方法（https://stackoverflow.com/a/9304367/1986406）。

但是当页面加载时我有问题。

控制台出错：

Html代码：

位置代码：

我如何解决问题？

---

修改

---

非常感谢回复。哦，我正在发布/分享我的代码。

你看过我的控制台图片了吗？

Html代码： <img src="images/livingroom/1.png" id="parca0" onLoad="getPixels0(this)" width="950" height="499" /> <img src="images/livingroom/2.png" id="parca1" onLoad="getPixels1(this)" width="950" height="499" /> <img src="images/livingroom/3.png" id="parca2" onLoad="getPixels2(this)" width="950" height="499" /> <img src="images/kitchen/1.png" id="parca3" onLoad="getPixels3(this)" width="950" height="499" /> <img src="images/kitchen/2.png" id="parca4" onLoad="getPixels4(this)" width="950" height="499" /> <img src="images/kitchen/3.png" id="parca5" onLoad="getPixels5(this)" width="950" height="499" /> <img src="images/bedroom/1.png" id="parca6" onLoad="getPixels6(this)" width="950" height="499" /> <img src="images/bedroom/2.png" id="parca7" onLoad="getPixels7(this)" width="950" height="499" /> <img src="images/bedroom/3.png" id="parca8" onLoad="getPixels8(this)" width="950" height="499" /> <img src="images/bathroom/1.png" id="parca9" onLoad="getPixels9(this)" width="950" height="499" /> <img src="images/bathroom/2.png" id="parca10" onLoad="getPixels10(this)" width="950" height="499" /> <img src="images/bathroom/3.png" id="parca11" onLoad="getPixels11(this)" width="950" height="499" /> <script type="text/javascript" src="js/colorchange.js"></script>

colorchange.js： `var parca0 = document.getElementById（“parca0”）;         var canvas0 = document.createElement（“canvas”）;         canvas0.setAttribute（“id”，“sifir”）;         var ctx0 = canvas0.getContext（“2d”）;         var originalPixels0 = null;         var currentPixels0 = null;

    function HexToRGB0(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return { R: (Long >>> 16) & 0xff, G: (Long >>> 8) & 0xff, B: Long & 0xff };
    }

    function changeColor0(){
        if(!originalPixels0) return; // Check if image has loaded
        var newColor0 = HexToRGB0(document.getElementById("color0").value);
        for(var I = 0, L = originalPixels0.data.length; I < L; I += 4){
            if(currentPixels0.data[I + 3] > 0){
                currentPixels0.data[I] = originalPixels0.data[I] / 255 * newColor0.R;
                currentPixels0.data[I + 1] = originalPixels0.data[I + 1] / 255 * newColor0.G;
                currentPixels0.data[I + 2] = originalPixels0.data[I + 2] / 255 * newColor0.B;
            }
        }
        ctx0.putImageData(currentPixels0, 0, 0);
        parca0.src = canvas0.toDataURL("image/png");
    }

    var img0=document.getElementById("parca0");
    function getPixels0(img0){
        canvas0.width = img0.width;
        canvas0.height = img0.height;
        ctx0.drawImage(img0, 0, 0, img0.naturalWidth, img0.naturalHeight, 0, 0, img0.width, img0.height);
        originalPixels0 = ctx0.getImageData(0, 0, img0.width, img0.height);
        currentPixels0 = ctx0.getImageData(0, 0, img0.width, img0.height);
        img0.onload = null;
    }

    var parca1 = document.getElementById("parca1");
    var canvas1 = document.createElement("canvas");
    canvas1.setAttribute("id", "bir");
    var ctx1 = canvas1.getContext("2d");
    var originalPixels1 = null;
    var currentPixels1 = null;

    function HexToRGB1(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff, G: (Long >>> 8) & 0xff, B: Long & 0xff};
    }

    function changeColor1(){
        if(!originalPixels1) return; // Check if image has loaded
        var newColor1 = HexToRGB1(document.getElementById("color1").value);
        for(var I = 0, L = originalPixels1.data.length; I < L; I += 4){
            if(currentPixels1.data[I + 3] > 0){
                currentPixels1.data[I] = originalPixels1.data[I] / 255 * newColor1.R;
                currentPixels1.data[I + 1] = originalPixels1.data[I + 1] / 255 * newColor1.G;
                currentPixels1.data[I + 2] = originalPixels1.data[I + 2] / 255 * newColor1.B;
            }
        }
        ctx1.putImageData(currentPixels1, 0, 0);
        parca1.src = canvas1.toDataURL("image/png");
    }

    var img1=document.getElementById("parca1");
    function getPixels1(img1){
        canvas1.width = img1.width;
        canvas1.height = img1.height;
        ctx1.drawImage(img1, 0, 0, img1.naturalWidth, img1.naturalHeight, 0, 0, img1.width, img1.height);
        originalPixels1 = ctx1.getImageData(0, 0, img1.width, img1.height);
        currentPixels1 = ctx1.getImageData(0, 0, img1.width, img1.height);
        img1.onload = null;
    }

    var parca2 = document.getElementById("parca2");
    var canvas2 = document.createElement("canvas");
    canvas2.setAttribute("id", "iki");
    var ctx2 = canvas2.getContext("2d");
    var originalPixels2 = null;
    var currentPixels2 = null;

    function HexToRGB2(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor2(){
        if(!originalPixels2) return; // Check if image has loaded
        var newColor2 = HexToRGB2(document.getElementById("color2").value);
        for(var I = 0, L = originalPixels2.data.length; I < L; I += 4){
            if(currentPixels2.data[I + 3] > 0){
                currentPixels2.data[I] = originalPixels2.data[I] / 255 * newColor2.R;
                currentPixels2.data[I + 1] = originalPixels2.data[I + 1] / 255 * newColor2.G;
                currentPixels2.data[I + 2] = originalPixels2.data[I + 2] / 255 * newColor2.B;
            }
        }
        ctx2.putImageData(currentPixels2, 0, 0);
        parca2.src = canvas2.toDataURL("image/png");
    }

    var img2=document.getElementById("parca2");
    function getPixels2(img2){
        canvas2.width = img2.width;
        canvas2.height = img2.height;
        ctx2.drawImage(img2, 0, 0, img2.naturalWidth, img2.naturalHeight, 0, 0, img2.width, img2.height);
        originalPixels2 = ctx2.getImageData(0, 0, img2.width, img2.height);
        currentPixels2 = ctx2.getImageData(0, 0, img2.width, img2.height);
        img2.onload = null;
    }

    var parca3 = document.getElementById("parca3");
    var canvas3 = document.createElement("canvas");
    canvas3.setAttribute("id", "uc");
    var ctx3 = canvas3.getContext("2d");
    var originalPixels3 = null;
    var currentPixels3 = null;

    function HexToRGB3(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor3(){
        if(!originalPixels3) return; // Check if image has loaded
        var newColor3 = HexToRGB3(document.getElementById("color3").value);
        for(var I = 0, L = originalPixels3.data.length; I < L; I += 4){
            if(currentPixels3.data[I + 3] > 0){
                currentPixels3.data[I] = originalPixels3.data[I] / 255 * newColor3.R;
                currentPixels3.data[I + 1] = originalPixels3.data[I + 1] / 255 * newColor3.G;
                currentPixels3.data[I + 2] = originalPixels3.data[I + 2] / 255 * newColor3.B;
            }
        }
        ctx3.putImageData(currentPixels3, 0, 0);
        parca3.src = canvas3.toDataURL("image/png");
    }

    var img3=document.getElementById("parca3");
    function getPixels3(img3){
        canvas3.width = img3.width;
        canvas3.height = img3.height;
        ctx3.drawImage(img3, 0, 0, img3.naturalWidth, img3.naturalHeight, 0, 0, img3.width, img3.height);
        originalPixels3 = ctx3.getImageData(0, 0, img3.width, img3.height);
        currentPixels3 = ctx3.getImageData(0, 0, img3.width, img3.height);
        img3.onload = null;
    }

    var parca4 = document.getElementById("parca4");
    var canvas4 = document.createElement("canvas");
    canvas4.setAttribute("id", "dort");
    var ctx4 = canvas4.getContext("2d");
    var originalPixels4 = null;
    var currentPixels4 = null;

    function HexToRGB4(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor4(){
        if(!originalPixels4) return; // Check if image has loaded
        var newColor4 = HexToRGB4(document.getElementById("color4").value);
        for(var I = 0, L = originalPixels4.data.length; I < L; I += 4){
            if(currentPixels4.data[I + 3] > 0){
                currentPixels4.data[I] = originalPixels4.data[I] / 255 * newColor4.R;
                currentPixels4.data[I + 1] = originalPixels4.data[I + 1] / 255 * newColor4.G;
                currentPixels4.data[I + 2] = originalPixels4.data[I + 2] / 255 * newColor4.B;
            }
        }
        ctx4.putImageData(currentPixels4, 0, 0);
        parca4.src = canvas4.toDataURL("image/png");
    }

    var img4=document.getElementById("parca4");
    function getPixels4(img4){
        canvas4.width = img4.width;
        canvas4.height = img4.height;
        ctx4.drawImage(img4, 0, 0, img4.naturalWidth, img4.naturalHeight, 0, 0, img4.width, img4.height);
        originalPixels4 = ctx4.getImageData(0, 0, img4.width, img4.height);
        currentPixels4 = ctx4.getImageData(0, 0, img4.width, img4.height);
        img4.onload = null;
    }

    var parca5 = document.getElementById("parca5");
    var canvas5 = document.createElement("canvas");
    canvas5.setAttribute("id", "bes");
    var ctx5 = canvas5.getContext("2d");
    var originalPixels5 = null;
    var currentPixels5 = null;

    function HexToRGB5(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor5(){
        if(!originalPixels5) return; // Check if image has loaded
        var newColor5 = HexToRGB5(document.getElementById("color5").value);
        for(var I = 0, L = originalPixels5.data.length; I < L; I += 4){
            if(currentPixels5.data[I + 3] > 0){
                currentPixels5.data[I] = originalPixels5.data[I] / 255 * newColor5.R;
                currentPixels5.data[I + 1] = originalPixels5.data[I + 1] / 255 * newColor5.G;
                currentPixels5.data[I + 2] = originalPixels5.data[I + 2] / 255 * newColor5.B;
            }
        }
        ctx5.putImageData(currentPixels5, 0, 0);
        parca5.src = canvas5.toDataURL("image/png");
    }

    var img5=document.getElementById("parca5");
    function getPixels5(img5){
        canvas5.width = img5.width;
        canvas5.height = img5.height;
        ctx5.drawImage(img5, 0, 0, img5.naturalWidth, img5.naturalHeight, 0, 0, img5.width, img5.height);
        originalPixels5 = ctx5.getImageData(0, 0, img5.width, img5.height);
        currentPixels5 = ctx5.getImageData(0, 0, img5.width, img5.height);
        img5.onload = null;
    }

    var parca6 = document.getElementById("parca6");
    var canvas6 = document.createElement("canvas");
    canvas6.setAttribute("id", "alti");
    var ctx6 = canvas6.getContext("2d");
    var originalPixels6 = null;
    var currentPixels6 = null;

    function HexToRGB6(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor6(){
        if(!originalPixels6) return; // Check if image has loaded
        var newColor6 = HexToRGB6(document.getElementById("color6").value);
        for(var I = 0, L = originalPixels6.data.length; I < L; I += 4){
            if(currentPixels6.data[I + 3] > 0){
                currentPixels6.data[I] = originalPixels6.data[I] / 255 * newColor6.R;
                currentPixels6.data[I + 1] = originalPixels6.data[I + 1] / 255 * newColor6.G;
                currentPixels6.data[I + 2] = originalPixels6.data[I + 2] / 255 * newColor6.B;
            }
        }
        ctx6.putImageData(currentPixels6, 0, 0);
        parca6.src = canvas6.toDataURL("image/png");
    }

    var img6=document.getElementById("parca6");
    function getPixels6(img6){
        canvas6.width = img6.width;
        canvas6.height = img6.height;
        ctx6.drawImage(img6, 0, 0, img6.naturalWidth, img6.naturalHeight, 0, 0, img6.width, img6.height);
        originalPixels6 = ctx6.getImageData(0, 0, img6.width, img6.height);
        currentPixels6 = ctx6.getImageData(0, 0, img6.width, img6.height);
        img6.onload = null;
    }

    var parca7 = document.getElementById("parca7");
    var canvas7 = document.createElement("canvas");
    canvas7.setAttribute("id", "yedi");
    var ctx7 = canvas7.getContext("2d");
    var originalPixels7 = null;
    var currentPixels7 = null;

    function HexToRGB7(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor7(){
        if(!originalPixels7) return; // Check if image has loaded
        var newColor7 = HexToRGB7(document.getElementById("color7").value);
        for(var I = 0, L = originalPixels7.data.length; I < L; I += 4){
            if(currentPixels7.data[I + 3] > 0){
                currentPixels7.data[I] = originalPixels7.data[I] / 255 * newColor7.R;
                currentPixels7.data[I + 1] = originalPixels7.data[I + 1] / 255 * newColor7.G;
                currentPixels7.data[I + 2] = originalPixels7.data[I + 2] / 255 * newColor7.B;
            }
        }
        ctx7.putImageData(currentPixels7, 0, 0);
        parca7.src = canvas7.toDataURL("image/png");
    }

    var img7=document.getElementById("parca7");
    function getPixels7(img7){
        canvas7.width = img7.width;
        canvas7.height = img7.height;
        ctx7.drawImage(img7, 0, 0, img7.naturalWidth, img7.naturalHeight, 0, 0, img7.width, img7.height);
        originalPixels7 = ctx7.getImageData(0, 0, img7.width, img7.height);
        currentPixels7 = ctx7.getImageData(0, 0, img7.width, img7.height);
        img7.onload = null;
    }

    var parca8 = document.getElementById("parca8");
    var canvas8 = document.createElement("canvas");
    canvas8.setAttribute("id", "sekiz");
    var ctx8 = canvas8.getContext("2d");
    var originalPixels8 = null;
    var currentPixels8 = null;

    function HexToRGB8(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor8(){
        if(!originalPixels8) return; // Check if image has loaded
        var newColor8 = HexToRGB8(document.getElementById("color8").value);
        for(var I = 0, L = originalPixels8.data.length; I < L; I += 4){
            if(currentPixels8.data[I + 3] > 0){
                currentPixels8.data[I] = originalPixels8.data[I] / 255 * newColor8.R;
                currentPixels8.data[I + 1] = originalPixels8.data[I + 1] / 255 * newColor8.G;
                currentPixels8.data[I + 2] = originalPixels8.data[I + 2] / 255 * newColor8.B;
            }
        }
        ctx8.putImageData(currentPixels8, 0, 0);
        parca8.src = canvas8.toDataURL("image/png");
    }

    var img8=document.getElementById("parca8");
    function getPixels8(img8){
        canvas8.width = img8.width;
        canvas8.height = img8.height;
        ctx8.drawImage(img8, 0, 0, img8.naturalWidth, img8.naturalHeight, 0, 0, img8.width, img8.height);
        originalPixels8 = ctx8.getImageData(0, 0, img8.width, img8.height);
        currentPixels8 = ctx8.getImageData(0, 0, img8.width, img8.height);
        img8.onload = null;
    }

    var parca9 = document.getElementById("parca9");
    var canvas9 = document.createElement("canvas");
    canvas9.setAttribute("id", "dokuz");
    var ctx9 = canvas9.getContext("2d");
    var originalPixels9 = null;
    var currentPixels9 = null;

    function HexToRGB9(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor9(){
        if(!originalPixels9) return; // Check if image has loaded
        var newColor9 = HexToRGB9(document.getElementById("color9").value);
        for(var I = 0, L = originalPixels9.data.length; I < L; I += 4){
            if(currentPixels9.data[I + 3] > 0){
                currentPixels9.data[I] = originalPixels9.data[I] / 255 * newColor9.R;
                currentPixels9.data[I + 1] = originalPixels9.data[I + 1] / 255 * newColor9.G;
                currentPixels9.data[I + 2] = originalPixels9.data[I + 2] / 255 * newColor9.B;
            }
        }
        ctx9.putImageData(currentPixels9, 0, 0);
        parca9.src = canvas9.toDataURL("image/png");
    }

    var img9=document.getElementById("parca9");
    function getPixels9(img9){
        canvas9.width = img9.width;
        canvas9.height = img9.height;
        ctx9.drawImage(img9, 0, 0, img9.naturalWidth, img9.naturalHeight, 0, 0, img9.width, img9.height);
        originalPixels9 = ctx9.getImageData(0, 0, img9.width, img9.height);
        currentPixels9 = ctx9.getImageData(0, 0, img9.width, img9.height);
        img9.onload = null;
    }

    var parca10 = document.getElementById("parca10");
    var canvas10 = document.createElement("canvas");
    canvas10.setAttribute("id", "on");
    var ctx10 = canvas10.getContext("2d");
    var originalPixels10 = null;
    var currentPixels10 = null;

    function HexToRGB10(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor10(){
        if(!originalPixels10) return; // Check if image has loaded
        var newColor10 = HexToRGB10(document.getElementById("color10").value);
        for(var I = 0, L = originalPixels10.data.length; I < L; I += 4){
            if(currentPixels10.data[I + 3] > 0){
                currentPixels10.data[I] = originalPixels10.data[I] / 255 * newColor10.R;
                currentPixels10.data[I + 1] = originalPixels10.data[I + 1] / 255 * newColor10.G;
                currentPixels10.data[I + 2] = originalPixels10.data[I + 2] / 255 * newColor10.B;
            }
        }
        ctx10.putImageData(currentPixels10, 0, 0);
        parca10.src = canvas10.toDataURL("image/png");
    }

    var img10=document.getElementById("parca10");
    function getPixels10(img10){
        canvas10.width = img10.width;
        canvas10.height = img10.height;
        ctx10.drawImage(img10, 0, 0, img10.naturalWidth, img10.naturalHeight, 0, 0, img10.width, img10.height);
        originalPixels10 = ctx10.getImageData(0, 0, img10.width, img10.height);
        currentPixels10 = ctx10.getImageData(0, 0, img10.width, img10.height);
        img10.onload = null;
    }

    var parca11 = document.getElementById("parca11");
    var canvas11 = document.createElement("canvas");
    canvas11.setAttribute("id", "onbir");
    var ctx11 = canvas11.getContext("2d");
    var originalPixels11 = null;
    var currentPixels11 = null;

    function HexToRGB11(Hex){
        var Long = parseInt(Hex.replace(/^#/, ""), 16);
        return {R: (Long >>> 16) & 0xff,G: (Long >>> 8) & 0xff,B: Long & 0xff};
    }

    function changeColor11(){
        if(!originalPixels11) return; // Check if image has loaded
        var newColor11 = HexToRGB11(document.getElementById("color11").value);
        for(var I = 0, L = originalPixels11.data.length; I < L; I += 4){
            if(currentPixels11.data[I + 3] > 0){
                currentPixels11.data[I] = originalPixels11.data[I] / 255 * newColor11.R;
                currentPixels11.data[I + 1] = originalPixels11.data[I + 1] / 255 * newColor11.G;
                currentPixels11.data[I + 2] = originalPixels11.data[I + 2] / 255 * newColor11.B;
            }
        }
        ctx11.putImageData(currentPixels11, 0, 0);
        parca11.src = canvas11.toDataURL("image/png");
    }

    var img11=document.getElementById("parca11");
    function getPixels11(img11){
        canvas11.width = img11.width;
        canvas11.height = img11.height;
        ctx11.drawImage(img11, 0, 0, img11.naturalWidth, img11.naturalHeight, 0, 0, img11.width, img11.height);
        originalPixels11 = ctx11.getImageData(0, 0, img11.width, img11.height);
        currentPixels11 = ctx11.getImageData(0, 0, img11.width, img11.height);
        img11.onload = null;
    }`

当我提出colorchange.js

时它不起作用