sayedsohail Posted June 1, 2007 Share Posted June 1, 2007 Hi everyone, I got four hyper links, onclick i am submitting to javascript function to highlight the item i clicked, and the other items/links to some light background, sort of giving focus to the current link. But unfortunately, its not working, here is my code <html> <title>tabs inside the page</title> <body> <script language='javascript'> function selectdiv(what) { if(what) { alert(what); document.getElementById(what).style.backgroundColor = 'blue'; } } </script> <div id='menu1' style='position:absolute;top:100px; left:150px;'><a href='#' onclick=\"selectdiv('menu1')\">Add Form</a></div> <div id='menu2' style='position:absolute;top:100px; left:250px;'><a href='editform2.html'>Edit Form</a></div> <div id='menu3' style='position:absolute;top:100px; left:350px;'><a href='deleform3.html'>Delete Form</a></div> <div id='menu4' style='position:absolute;top:100px; left:450px;'><a href='searchform4.html'>Search Form</a></div> </body> </html> Another thing i wish to add a for loop somthing like this any help is greatly appreciated. var titles = document.getelementbyid('menu'); titles[0].style.color='red'; for(var k=1;k<titles.length;k++) titles[k].style.color = '#ffffff'; Link to comment https://forums.phpfreaks.com/topic/53872-solved-getelementbyid-style-not-working-please-help/ Share on other sites More sharing options...
micah1701 Posted June 1, 2007 Share Posted June 1, 2007 you don't need to escape the quotes in the onClick command: onclick=\"selectdiv('menu1')\" should just be: onclick="selectdiv('menu1')" also, at the end of your function, you may want to add line "return false;" so that the browser doesn't continue to follow the link after doing the stuff in the function. Link to comment https://forums.phpfreaks.com/topic/53872-solved-getelementbyid-style-not-working-please-help/#findComment-266336 Share on other sites More sharing options...
sayedsohail Posted June 1, 2007 Author Share Posted June 1, 2007 This is what i did, but still its not working <html> <title>tabs inside the page</title> <body> <script language='javascript'> function selectdiv(what) { if(what) { var titles = document.getElementById(what); for(var k=0;k<titles.length;k++) titles[k].style.background='navy'; } return false; } </script> <div id='menu' style='position:absolute;top:100px; left:150px;'><a href='#' onclick="selectdiv('menu');">Add Form</a></div> <div id='menu' style='position:absolute;top:100px; left:250px;'><a href='editform2.html'>Edit Form</a></div> <div id='menu' style='position:absolute;top:100px; left:350px;'><a href='deleform3.html'>Delete Form</a></div> <div id='menu' style='position:absolute;top:100px; left:450px;'><a href='searchform4.html'>Search Form</a></div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/53872-solved-getelementbyid-style-not-working-please-help/#findComment-266345 Share on other sites More sharing options...
nogray Posted June 1, 2007 Share Posted June 1, 2007 getElementById() will only return one object (not an array), you can use document.getElementsByTagName('DIV') which will return all the divs in your page. Also, each element should have a unique ID (yours have menu for all) To fix your script, you can use something like this (num_of_divs) is how many divs you want to change <script language='javascript'> var num_of_divs = 4; function selectdiv(what) { if(what) { for(var k=0;k<num_of_divs;k++) document.getElementById('menu'+k).style.background='navy'; } return false; } </script> <div id='menu0' style='position:absolute;top:100px; left:150px;'><a href='#' onclick="selectdiv('menu');">Add Form</a></div> <div id='menu1' style='position:absolute;top:100px; left:250px;'><a href='editform2.html'>Edit Form</a></div> <div id='menu2' style='position:absolute;top:100px; left:350px;'><a href='deleform3.html'>Delete Form</a></div> <div id='menu3' style='position:absolute;top:100px; left:450px;'><a href='searchform4.html'>Search Form</a></div> Notice I changed the ids to menu0, menu1, .... Link to comment https://forums.phpfreaks.com/topic/53872-solved-getelementbyid-style-not-working-please-help/#findComment-266380 Share on other sites More sharing options...
sayedsohail Posted June 1, 2007 Author Share Posted June 1, 2007 Thanks nogray, here is the modified version, might be of any help to someone like me, although its not a perfect solution, please use it with care. <html> <title>tabs inside the page</title> <head> <script language='javascript'> ivar = num_of_divs = 4; function selectdiv(what,cur) { if(what) { for(var k=0;k<num_of_divs;k++) document.getElementById(what+k).style.background='white'; } document.getElementById(what+cur).style.background='#d7dabd'; return false; } </script> </head> <body> <div id='menu0' style='position:absolute;top:100px; left:150px; width:99px;color:white;'><a href='#' onclick="selectdiv('menu','0');">Add Form</a></div> <div id='menu1' style='position:absolute;top:100px; left:250px;width:99px;color:white;'><a href='#' onclick="selectdiv('menu','1');">Edit Form</a></div> <div id='menu2' style='position:absolute;top:100px; left:350px;width:99px;color:white;'><a href='#' onclick="selectdiv('menu','2');">Delete Form</a></div> <div id='menu3' style='position:absolute;top:100px; left:450px;width:99px;color:white;'><a href='#' onclick="selectdiv('menu','3');">Search Form</a></div> <div id='contentarea' style='top:200px; left: 150px; width:450px'></div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/53872-solved-getelementbyid-style-not-working-please-help/#findComment-266416 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.