Recognizing variables in external .js file

Question

I'm having an issue here in my code that is driving me nuts. I have all my code and variables declared in an external .js file and I'm trying to print them out into an table which will be created in Javascript. Here is the external .js file and the HTML which references it.

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";

the 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>

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

The issue us that the .js file is not loaded yet, when you are referencing these variables.

I would use jquery ready event - http://api.jquery.com/ready/

If you can't use jquery, then see answers for this question - $(document).ready equivalent without jQuery

Another option is to keep both scripts on the same place, either in js file or in html.

edited May 23 '17 at 12:20

Community

1
1

answered Jul 30 '13 at 19:33

mara-mfa

895
6
9

Recognizing variables in external .js file

1 Answers1