Run a function onload

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

Read the code.

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

1 Like

ok, fixed the for loop, but now get


what does it mean that the console is not defined?

oh, duh, javascript is case sensitive

2 Likes

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.

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());
		}

ok, used this and I get

@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.

Correction:

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

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

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?

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

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…

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

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!");
	}
})();
}
})();

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?

Put the if statement inside to self invoke function to working

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

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