Jump to content

button click on page load


demuro1

Recommended Posts

Hello again everyone, You have all been so helpful. I was wondering how I would make a button trigger on page load. So if I have the below code how would I make the first button trigger when the page loads?

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title> <script type='text/javascript'>function buttonPush()	 {		  var y = document.getElementsByTagName('input');						  		  for(var i = 0; i < y.length; i++)			   {					y[i].indexNumber = i;						y[i].onclick = function()						 {							  alert(this.indexNumber);						 };			   }	 } 	  </script></head> <body onload="buttonPush();">	<input type="button" name='buy' value='buy 0'><br>	<input type="button" name='buy' value='buy 1'><br>	<input type="button" name='buy' value='buy 2'><br>	<input type="button" name='buy' value='buy 3'><br>	<input type="button" name='trade' value='trade 0'><br>	<input type="button" name='trade' value='trade 1'><br>	<input type="button" name='trade' value='trade 2'><br>	<input type="button" name='trade' value='trade 3'><br>	<input type="button" name='sell' value='sell 0'><br>	<input type="button" name='sell' value='sell 1'><br>	<input type="button" name='sell' value='sell 2'><br>	<input type="button" name='sell' value='sell 3'><br> </body></html>

Link to comment
Share on other sites

I think something like this is what you are looking for. (you'll notice i opted for no inline JS, so you'll what to include the JS part with an external script link in your <head>)http://jsfiddle.net/Ud299/2/

Link to comment
Share on other sites

I'd actually prefer the js to be inline. How would you accomplish that? Iv'e trued this but it doesn't seem to work. Any suggestions?

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><script type='text/javascript'>function buttonPush(){  var y = document.getElementsByTagName('input');  for(var i = 0; i < y.length; i++) {    y[i].indexNumber = i;      y[i].onclick = function() {	  alert(this.indexNumber);    };  }};window.onload = function(){  buttonPush();  document.getElementById("button1").click();  };   	  </script></head><body onload="buttonPush();">    <input type="button" name='buy' value='buy 0'><br>    <input type="button" name='buy' value='buy 1'><br>    <input type="button" name='buy' value='buy 2'><br>    <input type="button" name='buy' value='buy 3'><br>    <input type="button" name='trade' value='trade 0'><br>    <input type="button" name='trade' value='trade 1'><br>    <input type="button" name='trade' value='trade 2'><br>    <input type="button" name='trade' value='trade 3'><br>    <input type="button" name='sell' value='sell 0'><br>    <input type="button" name='sell' value='sell 1'><br>    <input type="button" name='sell' value='sell 2'><br>    <input type="button" name='sell' value='sell 3'><br> </body></html>

Link to comment
Share on other sites

I'm not sure why you prefer it inline, it is bad practice and harder to maintain. From here on in you should start looking at your error console and debug your code. (You can google erro console for whatever browser you are using.) You didn't explain the problem you now face. Provide any errors you are getting and what you want to be happening differently. For starters, buttonPush doesn't need to be called twice. And also review the HTML portion of my code and look up document.getElementById

Edited by thescientist
Link to comment
Share on other sites

Sorry I forgot to change that in the code I submitted. Long story short I am taking a web app class and the semester project has us making an online store. Whenever I get to a problem I am having trouble with I make a webpage with just that element in it, get it to work, then adapt the code to my page. I have some specific guidelines I have to follow. I understand the what you're saying and it makes sense! I'll take a look at what you suggested and Comeback with any info I am able to pick up. I appreciate your helpThanks

Link to comment
Share on other sites

Sorry I forgot to change that in the code I submitted. Long story short I am taking a web app class and the semester project has us making an online store. Whenever I get to a problem I am having trouble with I make a webpage with just that element in it, get it to work, then adapt the code to my page. I have some specific guidelines I have to follow. I understand the what you're saying and it makes sense! I'll take a look at what you suggested and Comeback with any info I am able to pick up. I appreciate your helpThanks
no problem. And that's a great approach towards developing. A lot of times in the context of bigger applications, sometimes its best to step outside the code to test new components. That's a good way debug. Also, the point I was trying to highlight with my example is that window.onload will run when the page is fully ready for use, as it were. Its a best practice to use that for all init code on your sites, since you know the DOM in particular will be fully loaded. You see this a lot with jquery, in their document.ready() event handler, which is why in particular i moved the buttonPush function call there, aside from the best practice of not using inline JS. Edited by thescientist
Link to comment
Share on other sites

Hate to be a pedant, but it's $(document).ready() not document.ready(). That will give you a syntax error :)
i know that.
Link to comment
Share on other sites

Hate to be a pedant, but it's $(document).ready() not document.ready(). That will give you a syntax error :)
It wouldn't give a syntax error, the syntax is perfectly fine. It would throw an error because the method does not exist.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...