demuro1 Posted October 21, 2012 Share Posted October 21, 2012 (edited) Hello again everyone. Again thanks in advance for your help. I am in a web app class and we have a semester long project that is updated every week. I am using the below code. when I click any button the alert displays the correct button value. The second alert needs to return the element index of the array. so if button 0 is clicked the second alert needs to display 0if button 1 is clicked the second alert needs to display 1if button 2 is clicked the second alert needs to display 2if button 3 is clicked the second alert needs to display 3 I need the function to determine the position in the array of document.getElementsByName('button') connected to the button clicked does anyone know how to do this, is it possible, can you suggest something that return a value based on the name property? thanks so much for your help <html> <head> <title>test</title> <style> /*sadly this is done without style*/ </style> <script type='text/javascript'> function indexNum(x) { var y = document.getElementsByName('button') alert(x.value); alert(x.name.indexOf('button')); } </script></head> <body> <input type="button" name='button' value='button 0' onclick="indexNum(this)"><br> <input type="button" name='button' value='button 1' onclick="indexNum(this)"><br> <input type="button" name='button' value='button 2' onclick="indexNum(this)"><br> <input type="button" name='button' value='button 3' onclick="indexNum(this)"> </body> </html> I did find this and it works but I can't seem to get it to work with button. Any idea on how to change the onclick and p tags to a button <html xmlns="http://www.w3.org/1999/xhtml"><head><title></title> <script type="text/javascript"> function countP() {var pElemA = document.getElementsByTagName('p'); for(var i=0; i < pElemA.length; i=i+1) {pElemA[i].indexNum = i; //store the index in your own property //assign an onclick function for the ppElemA[i].onclick = function() {alert(this.indexNum);}}} </script> </head><body onload="countP();"> <p>Click to get my index.</p> <div>div element</div> <p>Click me too...</p> <p>And me.</p> </body></html> Edited October 21, 2012 by demuro1 Link to comment Share on other sites More sharing options...
Don E Posted October 21, 2012 Share Posted October 21, 2012 (edited) You can change the <p> elements to buttons: <button type="button">Click to get my index.</button> <div>div element</div> <button type="button">Click me too...<button><br/> <button type="button">And me.</button> It should work. Make sure to declare a Doctype as well for the page. Edit: Same procedure basically works with the way you intended. Just modified a bit: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title> <script type='text/javascript'> function indexNum() { var y = document.getElementsByName('button') for(var i = 0; i < y.length; i++) { y[i].indexNumber = i; y[i].onclick = function() {alert(this.indexNumber);}; } } </script></head> <body onload="indexNum();"> <input type="button" name='button' value='button 0'/><br> <input type="button" name='button' value='button 1'/><br> <input type="button" name='button' value='button 2'/><br> <input type="button" name='button' value='button 3'/></body></html> Edited October 21, 2012 by Don E Link to comment Share on other sites More sharing options...
demuro1 Posted October 21, 2012 Author Share Posted October 21, 2012 (edited) You are so awesome. Thanks. This is perfect!!!!!! I'll be able to assimilate this code into mine now very well. edit:ok I have questions about how this works: how do the buttons work without an onclick event.-i see that the function begins running with the page load so does that means that the function is always waiting for an on on click-does the function react to all button clicks, but only takes action for objects named button?-how do i return a click with the page load?-is it possible to pass this.indexNumber out of the function? and this last question isn't something I need answered but I am curious about how you would make this work with the onclick in the input tag thanks again Edited October 22, 2012 by demuro1 Link to comment Share on other sites More sharing options...
Labtec Posted October 22, 2012 Share Posted October 22, 2012 (edited) edit Edited October 22, 2012 by Labtec Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2012 Share Posted October 22, 2012 <input type="button" name='button' value='button 0'/><br> <input type="button" name='button' value='button 1'/><br> <input type="button" name='button' value='button 2'/><br> <input type="button" name='button' value='button 3'/> function indexNum() { var y = document.getElementsByName('button') //looks for elements with name value of 'button' for(var i = 0; i < y.length; i++) // loops for each of found these targeted elements { y.indexNumber = i; // applies a custom data attribute, to store a value 0 to total targeted elements found -1(as for loop starts at 0) y.onclick = function() {alert(this.indexNumber);}; // applies onclick to all these targeted elements with anonymous function to show alert when clicked } }This will target all elements with name="button" only; You can use document.getElementsByTagName('input') to target all inputs, and use if condition to only target specific input elements with either specific type, name, className, or id But if you which to target <textarea> it might be better to use .elements which list through these as well http://www.w3schools.com/jsref/coll_form_elements.asp Note: you won't be able to see these onclick events and custom data attributes, added to the html of your button inputs. 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