![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
Inconsistent Javascript
Jun. 9th, 2019 11:14 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
tornirCode below updated 10 Jun 12:50.
I'm trying to get the (x,y) sizes of two images for use in later calculations.
In FF67, the test page loads, as do the images, but the reported sizes are all zero, however, if I press F5 and reload, the page works perfectly.
In Chrome75, despite loading, the image sizes are consistently zero, and the code crashes after test 3.
Can anyone see what I'm doing wrong?
The initial problem's been sorted by using onload to call routines to get the image sizes after they've loaded. The cookie handling seems to be working okay in FF.
Now I'm fining the main code is chugging along on it's own and looks like it's finishing execution before the onload routines have even been called. Now to find a way to make the code wait for them.
It's still working okay with F5 on FF, but Chrome still isn't seeing the one image's values from the other image's routine.
Okay, using SetTimeout to add a 100ms delay to the execution of the final cookie read seems to have sorted it in FF, but Chrome seems to be acting as if there ain't no cookie. despite it having been written to by two functions, all the values are undefined. :/
Is FF tolerating my buggy code, or is Chrome buggy?
index.html:
/files/images.js:
/files/bomb.png:
/files/eye.png:
In FF67, the test page loads, as do the images, but the reported sizes are all zero, however, if I press F5 and reload, the page works perfectly.
In Chrome75, despite loading, the image sizes are consistently zero, and the code crashes after test 3.
Can anyone see what I'm doing wrong?
The initial problem's been sorted by using onload to call routines to get the image sizes after they've loaded. The cookie handling seems to be working okay in FF.
Now I'm fining the main code is chugging along on it's own and looks like it's finishing execution before the onload routines have even been called. Now to find a way to make the code wait for them.
It's still working okay with F5 on FF, but Chrome still isn't seeing the one image's values from the other image's routine.
Okay, using SetTimeout to add a 100ms delay to the execution of the final cookie read seems to have sorted it in FF, but Chrome seems to be acting as if there ain't no cookie. despite it having been written to by two functions, all the values are undefined. :/
Is FF tolerating my buggy code, or is Chrome buggy?
index.html:
<!DOCTYPE html>
<html>
<head>
<script src= "files/images.js"></script>
<title></title>
</head>
<body>
<div>
<h1 id="page_title"></h1>
<p id="image_init_1"></p>
<p id="image_init_2"></p>
<p></p>
<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>
<p id="test4"></p>
<p id="test5"></p>
<p id="test6"></p>
<p id="test7"></p>
<p id="test8"></p>
<p id="test9"></p>
</div>
<div>
<script>
init();
read_cookie();
</script>
</div>
</body>
</html>/files/images.js:
// images.js
var JS_First_Image= "files/bomb.png", JS_Second_Image= "files/eye.png";
var First_Image_x_1, First_Image_y_1;
var Second_Image_x_1, Second_Image_y_1;
function First_img() {
// Read the cookie if it's there.
var myJSON_1= document.cookie;
document.getElementById("test1").innerHTML= "Read1: "+myJSON_1;
if (myJSON_1 !== "") {
var myObj_1 = JSON.parse(myJSON_1);
var First_Image_x_1= myObj_1.First_Image_x_1;
var First_Image_y_1= myObj_1.First_Image_y_1;
var Second_Image_x_1= myObj_1.Second_Image_x_1;
var Second_Image_y_1= myObj_1.Second_Image_y_1;
}
if (typeof Second_Image_x_1 === "undefined" && typeof Second_Image_y_1 === "undefined") {
var Second_Image_x_1= 0;
var Second_Image_y_1= 0;
}
document.getElementById("test2").innerHTML= "Img1a: "+First_Image_x_1+" "+First_Image_y_1+" "+Second_Image_x_1+" "+Second_Image_y_1;
// Write the cookie
First_Image_x_1= document.getElementById("First_one").naturalWidth;
First_Image_y_1= document.getElementById("First_one").naturalHeight;
var myObj_1= {First_Image_x_1, First_Image_y_1, Second_Image_x_1, Second_Image_y_1};
var myJSON_1= JSON.stringify(myObj_1);
document.cookie= myJSON_1;
document.getElementById("test3").innerHTML= "Img1b: "+First_Image_x_1+" "+First_Image_y_1+" "+Second_Image_x_1+" "+Second_Image_y_1;
}
function Second_img() {
// Read the cookie if it's there.
var myJSON_2= document.cookie;
document.getElementById("test4").innerHTML= "Read2: "+myJSON_2;
if (myJSON_2 !== "") {
var myObj_2 = JSON.parse(myJSON_2);
var First_Image_x_1= myObj_2.First_Image_x_1;
var First_Image_y_1= myObj_2.First_Image_y_1;
var Second_Image_x_1= myObj_2.Second_Image_x_1;
var Second_Image_y_1= myObj_2.Second_Image_y_1;
}
if (typeof First_Image_x_1 === "undefined" && typeof First_Image_y_1 === "undefined") {
var First_Image_x_1= 0;
var First_Image_y_1= 0;
}
document.getElementById("test5").innerHTML= "Img2a: "+First_Image_x_1+" "+First_Image_y_1+" "+Second_Image_x_1+" "+Second_Image_y_1;
// Write the cookie
Second_Image_x_1= document.getElementById("Second_one").naturalWidth;
Second_Image_y_1= document.getElementById("Second_one").naturalHeight;
var myObj_2= {First_Image_x_1, First_Image_y_1, Second_Image_x_1, Second_Image_y_1};
var myJSON_2= JSON.stringify(myObj_2);
document.cookie= myJSON_2;
document.getElementById("test6").innerHTML= "Img2b: "+First_Image_x_1+" "+First_Image_y_1+" "+Second_Image_x_1+" "+Second_Image_y_1;
}
function init() {
// Write the first image invisibly, and get it's size.
document.getElementById("image_init_1").innerHTML= '<img id="First_one" alt="Move along" src="'+JS_First_Image+'" style="width:0px; height:0px;" onload="First_img()">';
// Write the second image invisibly, and get it's size.
document.getElementById("image_init_2").innerHTML= '<img id="Second_one" alt="Nothing to see" src="'+JS_Second_Image+'" style="width:0px; height:0px;" onload="Second_img()">';
setTimeout(read_cookie, 100);
}
function read_cookie() {
document.getElementById("test7").innerHTML= "Check3: "+First_Image_x_1+" "+First_Image_y_1+" "+Second_Image_x_1+" "+Second_Image_y_1;
// Read the cookie if it's there.
var myJSON_3= document.cookie;
document.getElementById("test8").innerHTML= "Read3a: "+myJSON_3;
if (myJSON_3 !== "") {
var myObj_3 = JSON.parse(myJSON_3);
var First_Image_x_1= myObj_3.First_Image_x_1;
var First_Image_y_1= myObj_3.First_Image_y_1;
var Second_Image_x_1= myObj_3.Second_Image_x_1;
var Second_Image_y_1= myObj_3.Second_Image_y_1;
}
document.getElementById("test9").innerHTML= "Read3b: "+First_Image_x_1+" "+First_Image_y_1+" "+Second_Image_x_1+" "+Second_Image_y_1;
}/files/bomb.png:
/files/eye.png:
