?
Solved

Simple javascript: why won't it work cross-browser?

Posted on 2008-11-10
4
Medium Priority
?
224 Views
Last Modified: 2013-12-08
I am trying to use Javascript for a series of menu buttons. When clicked, I want to enter text into a hidden field, and change the border around the clicked icon. My code works fine in Firefox, but not in other browsers. Please advise.


Sample link:
 
<a href="javascript:setButton4();" onClick="javascript:document.forms['search'].cat.value='Toys';" onMouseUp="setButton4();">
 
The javascript functions:
 
function setButton1()  {
	document.button1.style.borderWidth="5"
	document.button2.style.borderWidth="1"
	document.button3.style.borderWidth="1"	
	document.button4.style.borderWidth="1"	
	document.button5.style.borderWidth="1"	
	document.button6.style.borderWidth="1"	
	document.button7.style.borderWidth="1"		
}
function setButton2()  {
	document.button1.style.borderWidth="1"
	document.button2.style.borderWidth="5"
	document.button3.style.borderWidth="1"	
	document.button4.style.borderWidth="1"	
	document.button5.style.borderWidth="1"	
	document.button6.style.borderWidth="1"	
	document.button7.style.borderWidth="1"	
}
function setButton3()  {
	document.button1.style.borderWidth="1"
	document.button2.style.borderWidth="1"
	document.button3.style.borderWidth="5"	
	document.button4.style.borderWidth="1"	
	document.button5.style.borderWidth="1"	
	document.button6.style.borderWidth="1"	
	document.button7.style.borderWidth="1"	
}
function setButton4()  {
	document.button1.style.borderWidth="1"
	document.button2.style.borderWidth="1"
	document.button3.style.borderWidth="1"	
	document.button4.style.borderWidth="5"	
	document.button5.style.borderWidth="1"	
	document.button6.style.borderWidth="1"	
	document.button7.style.borderWidth="1"	
}
function setButton5()  {
	document.button1.style.borderWidth="1"
	document.button2.style.borderWidth="1"
	document.button3.style.borderWidth="1"	
	document.button4.style.borderWidth="1"	
	document.button5.style.borderWidth="5"	
	document.button6.style.borderWidth="1"	
	document.button7.style.borderWidth="1"	
}
function setButton6()  {
	document.button1.style.borderWidth="1"
	document.button2.style.borderWidth="1"
	document.button3.style.borderWidth="1"	
	document.button4.style.borderWidth="1"	
	document.button5.style.borderWidth="1"	
	document.button6.style.borderWidth="5"	
	document.button7.style.borderWidth="1"	
}
function setButton7()  {
	document.button1.style.borderWidth="1"
	document.button2.style.borderWidth="1"
	document.button3.style.borderWidth="1"	
	document.button4.style.borderWidth="1"	
	document.button5.style.borderWidth="1"	
	document.button6.style.borderWidth="1"	
	document.button7.style.borderWidth="5"	
}

Open in new window

0
Comment
Question by:jpschreibman
  • 2
4 Comments
 
LVL 21

Expert Comment

by:silemone
ID: 22927555
it may be that  other styles are overriding

if this doesn't work, you could check which browser is being used and based upon that set the borderwidth accordingly where it shows up identical all browsers...
0
 
LVL 15

Accepted Solution

by:
quincydude earned 2000 total points
ID: 22927564
Hi,
Cannot test your code without the html, but you can merge this
onClick="javascript:document.forms['search'].cat.value='Toys';" onMouseUp="setButton4();"
to just
onClick="document.forms['search'].cat.value='Toys';setButton4();"
0
 

Author Comment

by:jpschreibman
ID: 22980296
No other styles are overriding. It simply is not working in IE.

Thanks for trying.

The HTML is attached below:

	<fieldset>
	<legend>Find More Presents!</legend>
			<form name="search" action="./?page=users_home&act=MORE#look" method="post">
	<table>
	<tr>		
		<td><a href="javascript:setButton4();" onClick="javascript:document.forms['search'].cat.value='Toys';" onMouseUp="setButton4();javascript:document.forms['search'].keyword.value='What type of toys are you looking for?';"><img id="button4" width="85" src="./theme/images/icon_toys.png"  border="5" ></a></td>		
		<td><a href="javascript:setButton5();" onClick="javascript:document.forms['search'].cat.value='VideoGames';javascript:document.forms['search'].keyword.value='What type of video games are you looking for?';" onMouseUp="setButton5();"><img id="button5" width="85" src="./theme/images/icon_games.png"  border="1" ></a></td>			
		<td><a href="#" onClick="javascript:document.forms['search'].cat.value='Books';javascript:document.forms['search'].keyword.value='What type of book are you looking for?';" onMouseUp="setButton1();"><img id="button1" width="85" src="./theme/images/icon_books.png"  border="1" ></a></td>
 
		<td><a href="#" onClick="javascript:document.forms['search'].cat.value='DVD';javascript:document.forms['search'].keyword.value='What type of movie or DVD are you looking for?';" onMouseUp="setButton2();"><img id="button2" width="85" src="./theme/images/icon_movies.png"  border="1" ></a></td>
		<td><a href="#" onClick="javascript:document.forms['search'].cat.value='Music';javascript:document.forms['search'].keyword.value='What type of music are you looking for?';" onMouseUp="setButton3();"><img id="button3" width="85" src="./theme/images/icon_music.png"  border="1" ></a></td>		
		<td><a href="#" onClick="javascript:document.forms['search'].cat.value='Apparel';javascript:document.forms['search'].keyword.value='What type of clothes are you looking for?';" onMouseUp="setButton6();"><img id="button6" width="85" src="./theme/images/icon_clothes.png"  border="1" ></a></td>				
		<td><a href="#" onClick="javascript:document.forms['search'].cat.value='Tools';javascript:document.forms['search'].keyword.value='What type of tools are you looking for?';" onMouseUp="setButton7();"><img id="button7" width="85" src="./theme/images/icon_tools.png"  border="1" ></a></td>				
		<td><a href="#" onClick="javascript:document.forms['search'].cat.value='Electronics';javascript:document.forms['search'].keyword.value='What type of electronics are you looking for?';" onMouseUp="setButton8();"><img id="button8" width="85" src="./theme/images/icon_electronics.png"  border="1" ></a></td>				
	<tr><td colspan="10" style="padding:10px;" bgcolor="#000033"><font color="#ffffff"><b>Search for:</b></font> <input type="text" size="45" name="keyword" value=""> <input class="submit" type="submit" value="go!"></td></tr>
	</table>
	<input type="hidden" name="cat" id="cat" value="Toys">
	<p>Want to browse the regular Amazon.com site? <a class="gen_link" href="http://www.amazon.com/?&tag=mychristma077-20&camp=211173&creative=374757&linkCode=ur1&adid=0MYJDPQBZ3ZBWY3TTZ64&" target="_blank">Click here!</a></p>
 
	</fieldset>
	</form>

Open in new window

0
 
LVL 15

Expert Comment

by:quincydude
ID: 22982140
Do not use
document.button7.style.borderWidth

try to change to

document.getElementById("button7").style.borderWidth
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Bada platform is becoming more and more famous this days and people talking about same. Some friends included those who have bada OS mobile asked me "what is bada?"and "what its features?". That encouraged me to research and write this article. [st…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question