demuro1 Posted October 26, 2012 Share Posted October 26, 2012 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 More sharing options...
thescientist Posted October 26, 2012 Share Posted October 26, 2012 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 More sharing options...
demuro1 Posted October 26, 2012 Author Share Posted October 26, 2012 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 More sharing options...
thescientist Posted October 26, 2012 Share Posted October 26, 2012 (edited) 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 October 26, 2012 by thescientist Link to comment Share on other sites More sharing options...
demuro1 Posted October 26, 2012 Author Share Posted October 26, 2012 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 More sharing options...
thescientist Posted October 26, 2012 Share Posted October 26, 2012 (edited) 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 helpThanksno 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 October 26, 2012 by thescientist Link to comment Share on other sites More sharing options...
Charles @ CodeConquest.com Posted October 29, 2012 Share Posted October 29, 2012 You see this a lot with jquery, in their document.ready() event handler Hate to be a pedant, but it's $(document).ready() not document.ready(). That will give you a syntax error Link to comment Share on other sites More sharing options...
thescientist Posted October 29, 2012 Share Posted October 29, 2012 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 More sharing options...
Ingolme Posted October 29, 2012 Share Posted October 29, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now