lupld Posted August 7, 2007 Share Posted August 7, 2007 I'm a complete javascript noob.. so to speak.. I only understand anything in javascript from what I know in php.. with that said, I'd like to make a variable that changes when a radio input button is selected... so I have this <style>td {color:(variable I want to change);}</style> <span style="background-color:#0000FF; width:10px;"><br /><input type="radio" name="color" value="#0000FF" /></span what do I need to put in to change that.. or is it even possible... I know you can change stuff like the bgcolor for a page, but I was wondering if you could do a variable and make it change the page... I need it to be able to change at least the background color of the page, the text color (in a div tag with css for text color), and link color, also in a div tag changed by css... any ideas appreciated, thanks... Quote Link to comment Share on other sites More sharing options...
lupld Posted August 7, 2007 Author Share Posted August 7, 2007 Just so people know, I'll be on till four or five checking on this.... Quote Link to comment Share on other sites More sharing options...
lupld Posted August 7, 2007 Author Share Posted August 7, 2007 oh well, no answers in like 12 hours, I gave up and wrote it without the javascript, I'll still check back here in case someone answers this.. I can still add it in anytime... Quote Link to comment Share on other sites More sharing options...
mainewoods Posted August 9, 2007 Share Posted August 9, 2007 <form name="test" action=""> <select onchange="document.body.style.backgroundColor=this.options[this.selectedIndex].text;"> <option>white</option> <option>red</option> <option>yellow</option> <option>#ddd</option> <option>#f0f0f0</option> </select> </form> Quote Link to comment Share on other sites More sharing options...
php_tom Posted August 10, 2007 Share Posted August 10, 2007 You're trying to do something like this: (?) <html> <body onload="document.bgColor='green'"> <input type='radio' id='color' onClick="document.bgColor='black'" /> </body> </html> Hope that helps. Quote Link to comment Share on other sites More sharing options...
emehrkay Posted August 10, 2007 Share Posted August 10, 2007 this isnt that difficult, i think that we just need more info. you have a varialbe, you have radio buttons...whats the relationship between them? how many? i see you're using a table, will each row have a variable and a group of radio buttons? etc etc Quote Link to comment Share on other sites More sharing options...
mainewoods Posted August 10, 2007 Share Posted August 10, 2007 the code below is tested and works, paste it into any web page(even a page that already has content) to change the background color of that web page using a select box: <form name="changebackground" action=""> Page backgroundColor: <select   onchange="document.body.style.backgroundColor=this.options[this.selectedIndex].text;"> <option>white</option> <option>red</option> <option>yellow</option> <option>green</option> <option>#ddd</option> <option>#f0f0f0</option> </select> </form> -just add as many new options as you want and specify a color name or a #rgb hex color code as the option text  -in order to change the background color of just a single element within a page, just change the 'onchange' within the 'select' in the code above like this: <select   onchange="document.getElementById('someID').style.backgroundColor=this.options[this.selectedIndex].text;"> -just leave the rest of the code the same and paste it into any web page. Create a test element to change the background color of: <span id="someID">Hello World!</span>  php_tom's is incorrect: <body onload="document.bgColor='green'"> -requires 'body' and 'style' and 'backgroundColor' is the correct attribute to use: <body onload="document.body.style.backgroundColor='green'"> -the 'C' must be capitalized in 'backgroundColor'. Quote Link to comment Share on other sites More sharing options...
lupld Posted August 15, 2007 Author Share Posted August 15, 2007 I ended up using a code very much like mainewoods, which believe it or not I got from the apple website.. if I can find the link I'll edit this post and put in the link... it has 4 diffrerent methods, like getElementByID and getElementByClass... I think I ended up using by id... thanks... Quote Link to comment Share on other sites More sharing options...
mainewoods Posted August 15, 2007 Share Posted August 15, 2007 I've tested the code like I used before and it will work on ie5+, ff, opera, and safari. Quote Link to comment Share on other sites More sharing options...
lupld Posted August 16, 2007 Author Share Posted August 16, 2007 k.. I might switch to your code because of how easy it is... the one from apple is a lot larger... I'll put it on here.... it's the file at the bottom of this post.. and here's the link to the page I eventually found...  http://developer.apple.com/internet/webcontent/styles.html  thanks for the help...  [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
mainewoods Posted August 16, 2007 Share Posted August 16, 2007 well, just what exactly are you doing with the script? Changing the background color of an individual element? That apple page had a number of different examples including swapping in a new stylesheet which you definitely don't need in this case. Go with the simplest way to implement your style change because that is liable to be the most cross browser. Swapping style sheets for instance, will not work on older browsers and requires hacks to work on all modern browsers, but element.style.backgroundColor = 'some color' will work way back and on all browsers.  Instead of using a form like I did, you can implement exactly the same thing in a link on a page: <a href="#" onclick="document.body.style.backgroundColor='#009900';">Make page background color '#009900'</a> you can paste that into any page and the link will change the background color of the page. Just change the RGB hex color code to anything you want for different colors. to change the backgroundColor of an individual element, do this: <a href="#" onclick="document.getElementById('theElementsId').style.backgroundColor='#009900';">Make my html element have background color '#009900'</a>   Quote Link to comment Share on other sites More sharing options...
lupld Posted August 17, 2007 Author Share Posted August 17, 2007 eh, I tried out what I used in IE7, FF, and I was planning on opera, safari, and IE6, I'm not real worried about 5 and under... but I found the change elements by id most useful... Quote Link to comment Share on other sites More sharing options...
mainewoods Posted August 17, 2007 Share Posted August 17, 2007 the getElementById() is definitely your best javascript friend and the biggest backbone to DOM DHTML programming Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.