...

View Full Version : function, modifying element styles problem



p4plus2
03-03-2008, 12:12 AM
Hey, I have small problem with this function I am working on. It uses onchange in a select list to modify a area of text(hiding and showing certain text). it is part of a game I am making (mostly in php) but my javascript knowledge is limited so I got most of the function done it just doesn't work :P. but fire bug isn't detecting any errors with it so its a working function just not right I suppose. Here is my function:



function style(){
prefer = document.forms[0].attackstyle.value;
var b = document.getElementById(melee);
var c = document.getElementById(magic);
var d = document.getElementById(range);
if (prefer=='magic'){
b.style.display='none';
c.style.display='inline';
d.style.display='none';
}
else if(prefer=='range'){
b.style.display='none';
c.style.display='none';
d.style.display='inline';
}
else{
b.style.display='inline';
c.style.display='none';
d.style.display='none';
}
return false;
}



And here is the part of the form that calls the function:



<select id="attackstyle" name="style"><option value="melee" selected="melee" onchange="style()">melee</option><option value="range" onchange="style()">range</option><option value="magic" onchange="style()">magic</option></select>


And heres the stuff that the form calls and hides based on changed option:



<div id="melee" class="melee">Enter a strength level</div><div id="range" class="range">Enter a range level</div><div id="magic" class="magic">Enter a magic level</div>


let me know if anything is not clear!
thanks,
~p4plus2~

Arty Effem
03-03-2008, 03:41 AM
<select id="attackstyle" name="style"><option value="melee" selected="melee" onchange="style()">
The onchange handler goes in the <select> tag, not in the option tags.

p4plus2
03-03-2008, 03:43 AM
I already tried that the I get an error that said "style is not a function" in firefox =\

Arty Effem
03-03-2008, 04:54 AM
I already tried that the I get an error that said "style is not a function" in firefox =\That's because it clashes with the <select> element's name which is in scope. Rename the function or the element. Also put quotes around the ids passed to document.getElementById.

p4plus2
03-03-2008, 06:29 AM
Thanks! So simple I wouldn't have realized that...Guess I better watch how I name things...! This solves all of my problems! Now to finish off my game! Less than 500 lines or so to go. But, these are just nuts and bolts The game atm is fully functional.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum