Run a function onload

lurtnowski · February 17, 2017, 11:37pm

I am trying to figure out how to run a function when a page loads, am trying…

window.onload = function() {
	
		for (i = 0; i >= 6; i++) { 

		Console.log('Hello world');
		
		Console.log(i);
		
		}
};

Shouldn’t the console be
Hello world
1
Hello world
2
…
…
Hello world
6
But when I look at the console, I see nothing

Mittineague · February 17, 2017, 11:43pm

Read the code.

Variable i is zero
While zero is greater than or equal to six
Add one to the variable

lurtnowski · February 17, 2017, 11:54pm

ok, fixed the for loop, but now get

what does it mean that the console is not defined?

lurtnowski · February 17, 2017, 11:58pm

oh, duh, javascript is case sensitive

lurtnowski · February 18, 2017, 1:35am

Im trying to achieve this

//target 6 form elements (by id) which allow file uploads so we can see what it being uploaded
//<input type="file" id="pic1">
//...
control1 = document.getElementById(pic1);
control2 = document.getElementById(pic2);
control3 = document.getElementById(pic3);
control4 = document.getElementById(pic4);
control5 = document.getElementById(pic5);
control6 = document.getElementById(pic6);
//the next 6 divs will display the result (if what is being uploaded is an image or not) which I wi.l test for next
///<div id="result1"></div>
//...
output1 = document.getElkementById(Image1);
output2 = document.getElkementById(Image2);
output3 = document.getElkementById(Imag33);
output4 = document.getElkementById(Image4);
output5 = document.getElkementById(Image5);
output6 = document.getElkementById(Image1);
//then I will add an event listener (for whenever a file is selected) so a function 
//will be run whenever a file is selected on and of the 6 elements
control1.addEventListener("change",checkType();
control2.addEventListener("change",checkType();
control3.addEventListener("change",checkType();
control4.addEventListener("change",checkType();
control5.addEventListener("change",checkType();
control6.addEventListener("change",checkType();

so my script is

		for (i = 1; i <= 6; i++) { 
		
	  	var control+i = document.getElementById(pic+i);
	  	var output+i = document.getElementById(Image+i);

	  	control+i.addEventListener("change", checkType());
		}

When I run it

So Im not sure if the way im using i in the loop is the problem.

liontas76 · February 18, 2017, 6:55am

For your first answer the code:

window.onload = function() {
	
		for (var i = 0; i <= 6; i++) { 

		console.log('Hello world');
		
		console.log(i);
		
		}
};

for the second try:

for (i = 1; i <= 6; i++) { 
		
	  	var control+[i] = document.getElementById(pic+[i]);
	  	var output+[i] = document.getElementById(Image+[i]);

	  	control+[i].addEventListener("change", checkType());
		}

lurtnowski · February 18, 2017, 8:57pm

ok, used this and I get

Mittineague · February 18, 2017, 9:32pm

@liontas76 are you sure you can do “variable variables” that way in JavaScript?

I’ve only used variable variables very rarely in PHP and for PHP at least the syntax can be a bit tricky.

liontas76 · February 18, 2017, 10:01pm

Correction:

for (i = 1; i <= 6; i++) { 
		
	  	var controli = document.getElementById('pic'+[i]);
	  	var outputi = document.getElementById('Image'+[i]);

	  	controli.addEventListener("change", checkType());
		}

lurtnowski · February 18, 2017, 10:09pm

Lets ignore the for loop for the time being and am trying to get only 1 image preview to work.
I changed my code to

window.onload = function() {
	
		//for (i = 1; i <= 6; i++) { 
		
	  	var control1 = document.getElementById('pic1');
	  	var output1 = document.getElementById('Image1');

	  	control1.addEventListener("change", checkType());
		//}
};
		function checkType() {
			
		//display the container for all images
		document.getElementById('All-images').style.display = "block";
		
		var type1  = control1.files[0].type;
		var size1 = control1.files[0].size;
		var result1 = document.getElementById("result1");
		var preview1 = document.getElementById("Image1");
		
			if( type1.split('/')[0]=='image' && size <= 500000)
			{
			output1.style.display = "inline";
			result1.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
			preview1.src = URL.createObjectURL(event.target.files[0]);

			} else {
			result1.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
			alert("You have to select an image which is less than 500Kb!");
			}
	  		//preview the image
 		}

when I load the page,

It looks like the error is in the function (not being able to see the variable.
Since im trying run the function to test what is being uploaded, I gather it would be best if I had the file selected to be uploaded be a parameter for the function, can I simply do…

control1.addEventListener("change", checkType(control1.innerHTML));

then use that in the function?

liontas76 · February 19, 2017, 6:33am

Can you give us the html code?For this error that you have i am thinking two causes.The first is that you dont have element with an id pic1.The second is that you invoke the function when the window.onload and you create a var control1 based on your document.I think that the function maybe invoking when document.ready and not window.onload

lurtnowski · February 20, 2017, 9:36pm

sure, the form element…

<input type="file" name="images[]" id="pic1" class="form-control" accept="image/*">

Heres the function invoked by window.onload

window.onload = function() {
		
	  	var control1 = document.getElementById('pic1');
	  	var output1 = document.getElementById('Image1');

	  	control1.addEventListener("change", checkType());
};

Im trying to run a function to check the type of file being uploaded (just make sure it is an image but think Im missing a parameter or something…

function checkType() {
			
//display the container for all images
document.getElementById('All-images').style.display = "block";
		
///get its type
var type1  = control1.files[0].type;
//get its size
var size1 = control1.files[0].size;
//target div to show the result, good/bad		
var result1 = document.getElementById("result1");
//target the div to preview the image (if good)		
var preview1 = document.getElementById("Image1");
		
	if( type1.split('/')[0]=='image' && size <= 500000)
	{
	output1.style.display = "inline";
	result1.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
	preview1.src = URL.createObjectURL(event.target.files[0]);

	} else {
	result1.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
	alert("You have to select an image which is less than 500Kb!");
	}
}

but when I open the page, open the console…

liontas76 · February 20, 2017, 10:00pm

Try to run the code when $( document ).ready() and not window.onload.

liontas76 · February 21, 2017, 8:04am

Check this:

if(document.readyState==='complete'){
(function(){		
 var control1 = document.getElementById('pic1');
 var output1 = document.getElementById('Image1');
 control1.addEventListener("change", checkType());
})();

(function checkType() {
			
//display the container for all images
document.getElementById('pic1').style.display = "block";
		
///get its type
var type1  = control1.files[0].type;
//get its size
var size1 = control1.files[0].size;
//target div to show the result, good/bad		
var result1 = document.getElementById("result1");
//target the div to preview the image (if good)		
var preview1 = document.getElementById("Image1");
		
	if( type1.split('/')[0]=='image' && size <= 500000)
	{
	output1.style.display = "inline";
	result1.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
	preview1.src = URL.createObjectURL(event.target.files[0]);

	} else {
	result1.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
	alert("You have to select an image which is less than 500Kb!");
	}
})();
}

Or this I am not sure what works for you…

(function(){
if(document.readyState==='complete'){
(function(){		
 var control1 = document.getElementById('pic1');
 var output1 = document.getElementById('Image1');
 control1.addEventListener("change", checkType());
})();

(function checkType() {
			
//display the container for all images
document.getElementById('pic1').style.display = "block";
		
///get its type
var type1  = control1.files[0].type;
//get its size
var size1 = control1.files[0].size;
//target div to show the result, good/bad		
var result1 = document.getElementById("result1");
//target the div to preview the image (if good)		
var preview1 = document.getElementById("Image1");
		
	if( type1.split('/')[0]=='image' && size <= 500000)
	{
	output1.style.display = "inline";
	result1.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
	preview1.src = URL.createObjectURL(event.target.files[0]);

	} else {
	result1.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
	alert("You have to select an image which is less than 500Kb!");
	}
})();
}
})();

lurtnowski · February 23, 2017, 10:46pm

ok thanks
I used the first one, changed it a little to

if(document.readyState==='complete'){
(function(){		
 var control1 = document.getElementById('pic1');
// this element is used only to preview the image, so I only target it in the function?
// var output1 = document.getElementById('Image1');
 control1.addEventListener("change", checkType());
})();

(function checkType() {
			
//display the container for all images
document.getElementById('All-images').style.display = "block";
		
///get its type
var type1  = control1.files[0].type;
console.log('Type: '+type1);
console.log("<br>");
//get its size
var size1 = control1.files[0].size;
console.log("Size: "+size1);
//target div to show the result, good/bad		
var result1 = document.getElementById("result1");
//target the div to preview the image (if good)		
var preview1 = document.getElementById("Image1");
		
	if( type1.split('/')[0]=='image' && size <= 500000)
	{
	output1.style.display = "inline";
	result1.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
	preview1.src = URL.createObjectURL(event.target.files[0]);

	} else {
	result1.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
	alert("You have to select an image which is less than 500Kb!");
	}
})();
}

Im getting

when I choose an image
What does the warning mean (console)
Because nothing is being written to the console (Type & Size) Does that mean the function isn’t even being run when an image is selected?

liontas76 · February 24, 2017, 5:26am

Put the if statement inside to self invoke function to working

lurtnowski · February 27, 2017, 10:22pm

Sorry, I really didn’t understand where you wanted me to place the if statement so made a few changes to the code

//once the page loads, target the file element for testing and give it a function using an event
if(document.readyState==='complete'){
(function(){		

var control1 = document.getElementById('pic1');

control1.addEventListener("change", checkType());
})();

(function checkType() {
			
//display the container for all images if its not visible already
  if (document.getElementByID('All-images').style.display == "none")
  {
     document.getElementById('All-images').style.display = "block";
  }		
///get the file to be uploaded type
var type1  = control1.files[0].type;
console.log('Type: '+type1);
console.log("<br>");

//get the files size
var size1= control1.files[0].size;
console.log("Size: "+size1);
//target div to show the result, good/bad		
var result1 = document.getElementById("result1");
//target the div to preview the image (if good)		
var preview1 = document.getElementById("Image1");
		
	if( type1.split('/')[0]=='image' && size <= 500000)
	{
	output1.style.display = "inline";
	result1.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
	preview1.src = URL.createObjectURL(event.target.files[0]);

	} else {
	result1.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
	alert("You have to select an image which is less than 500Kb!");
	}
})();
}

I still get the same result, when I open the page, check the console, see the dumb wanring.

[Violation] Forced reflow while executing JavaScript took 31ms

But when I select an image, I see nothing in the console so im guessing the function isn’t even being run

system · May 30, 2017, 5:22am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Onload()? JavaScript	2	342	March 22, 2010
Load multiple function in javascript onsubmit using window.onload JavaScript	4	2527	October 8, 2014
Javascript function is undefined on onclick event JavaScript	4	22191	April 14, 2017
How do i launch a function when web page loads? JavaScript	8	1015	December 28, 2016
Question about how functions load using document.onload JavaScript	3	1151	November 20, 2010

Run a function onload

Related topics