Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2008
    Posts
    103
    Thanks
    1
    Thanked 8 Times in 8 Posts

    function, modifying element styles problem

    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:

    Code:
    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:

    Code:
    <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:

    Code:
    <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~

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by p4plus2 View Post
    Code:
    <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.

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Posts
    103
    Thanks
    1
    Thanked 8 Times in 8 Posts
    I already tried that the I get an error that said "style is not a function" in firefox =\

  • #4
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by p4plus2 View Post
    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.

  • #5
    Regular Coder
    Join Date
    Mar 2008
    Posts
    103
    Thanks
    1
    Thanked 8 Times in 8 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •