识别外部.js文件中的变量

Recognizing variables in external .js file

本文关键字：变量 文件 外部 js 识别      更新时间：2023-09-26

我的代码中出现了一个问题，这让我抓狂。我在一个外部.js文件中声明了我所有的代码和变量，我正试图将它们打印到一个将用Javascript创建的表中。这是外部.js文件和引用它的HTML。

loadImage.js

var pos = [];
var xAvg;
var yAvg;
var cirCtr;
var radAvg;
var defAvg;
var comPer;
var img=new Image();
img.onload=function(){
    var can = document.getElementById('C');
    var ctx = can.getContext('2d');            //creates canvas and image data
    ctx.drawImage(img, 0, 0);
    var imgdata = ctx.getImageData(0,0, img.width, img.height);
    var data = imgdata.data;

var index = [];
var vertical;
var horizontal;
for (var i = 0; i < data.length; i += 4) {
    if (data[i] == 255) {                  //finds position of piexel in data array
        index.push(i);
    }
}
for (var i = 0; i < index.length; i++) {  //finds coordinate postion of pixel
    var vertical =
    Math.floor((index[i] / 4) / 400);
    var horizontal =
    Math.floor((index[i] / 4) % 400);
    pos.push(horizontal, vertical);
}

var xTot = 0;
var yTot = 0;

for (var i = 0; i < pos.length; i+=2){
    xTot = xTot + pos[i];               //finds x value of circe center
    xAvg = xTot/( (pos.length+1) / 2);
};
for (var j = 1; j < pos.length; j+=2){
    yTot = yTot + pos[j];              //finds y value of circle center
    yAvg = yTot/( (pos.length+1) / 2);
};
cirCtr = [xAvg, yAvg];
alert("The center of the circle is " + cirCtr);
var radTot = 0;
//finds average radius of traced circle
for (var i = 0; i < pos.length; i+=2){
    radTot = radTot + Math.sqrt(Math.pow((pos[i+1] - cirCtr[1]), 2) + Math.pow((pos[i] - cirCtr[0]), 2));
    radAvg = radTot / ( (pos.length+1) / 2);
}
var defTot = 0;
for (var i = 0; i < pos.length; i+=2) {
    defTot = defTot + (Math.abs(Math.sqrt(Math.pow((pos[i+1] - cirCtr[1]), 2) + Math.pow((pos[i] - cirCtr[0]), 2)) - radAvg));
    defAvg = defTot / ( (pos.length+1) / 2);
}
comPer= 100 * ((Math.PI * Math.pow(radAvg,2))/(Math.PI * Math.pow((radAvg + defAvg), 2)));
alert(defTot);
alert("The radius of the circle is " + radAvg);
}
img.crossOrigin="anonymous";  //this had to do with the DOM Exception 18 thing
img.src="https://dl.dropboxusercontent.com/u/196150873/tile_0000_session_23220.skl.png";

HTML

<html>
<head>
    <script src="loadImage.js" type="text/javascript"></script>
    <script> function();</script>
</head>
<body>
    <h1>200 Circles</h1>
    <canvas id="C" height="400" width="400"></canvas>
    <div>
        <table border="1">
            <thead>
                <tr>
                    <th>Center</th>
                    <th>Regular Radius</th>
                    <th>Derived Radius</th>
                    <th>Area proportionality</th>
                </tr>
            </thead>
            <tbody id="log"></tbody>
        </table>
    </div>
    <script>
        for (var i=0; i < 10; i++) {
            addRow();
        }
        function addRow() {
            var newRow =
            "<tr>" +
            "<td>" + cirCtr + "</td>" +
            "<td>" + radAvg + "</td>" +
            "<td>" + (radAvg + defAvg) + "</td>" +
            "<td>" + comPer + "</td>" +
            "</tr>";
            document.getElementById("log").innerHTML += newRow;
        }
    </script>
<body>
</html>

当您正在引用这些变量。

我会使用jquery就绪事件-http://api.jquery.com/ready/

如果你不能使用jquery，那么看看这个问题的答案-没有jquery 的$（document）.ready等价物

另一种选择是将两个脚本放在同一个位置，无论是在js文件中还是在html中。

相关文章：