Inconsistent Javascript

Sun, 09 Jun 2019 11:00:15 GMT

Posted by: tornir

Code 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:

<!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:

comments

JIT: JavaScript InfoVis Toolkit

Thu, 07 Apr 2011 21:12:19 GMT

Posted by: foxfirefey

Pretty graphs! Many other fun JS libraries/tools here.

comments

jsFiddle: easy way to play with JS frameworks and share code snippets

Sun, 16 May 2010 13:12:30 GMT

Posted by: afuna

jsFiddle is a nifty website which combines pastebin with a working dev environment. It's handy for fiddling about with code snippets, or for putting up code for a demo when asking a question.

You provide the HTML, JS, and any CSS, select a framework to be made available, then click the "Run" button to see your results. Then you can clear everything, or else save the code snippets and be given a URL to access them from.

Also nifty: you can simulate AJAX requests.

Overall, it takes out some of the pain of setting up a test case or quick discardable demo when sharing ideas with other people.

comments

Sat, 08 May 2010 15:01:34 GMT

Posted by: erda

I'm curious to know how much javascript knowledge you all have. I'm about 170 pages into my Javascript Beginner's guide, so I know, um, not much.

comments