talksr Posted December 10, 2007 Share Posted December 10, 2007 I have been using the style property of an element to to change style properties for an element. I want to add another button and the corresponding Javascript to change the background colour for para2 (which is my second pharagraph). How can I do this? <html> <head> <style type="text/css"> #para2, #para3 { backgroundcolor: red; } </style> <script type="text/javascript"> function show_para1_status_win() { var oPara1=document.getElementById("para1"); window.status=oPara1.innerText; } function clear_status_win() { window.status=""; } </script> <title>Using the dom</title> </head> <body> <h1>Using the DOM</h1> <p id="para1">paragraph one text here</p> <p id="para2">paragraph two text here</p> <p id="para3">paragraph three text here</p> <hr /> <input type="button" name="Button" onClick="show_para1_status_win()" value="Show para1" /> <input type="button" name="Button" onClick="clear_status_win()" value="Clear status" /> <hr /> </body> </html> Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 10, 2007 Share Posted December 10, 2007 <html> <head> <style type="text/css"> #para2, #para3 { backgroundcolor:red; } </style> <script type="text/javascript"> function show_para1_status_win() { var oPara1=document.getElementById("para1"); window.status=oPara1.innerHTML; } function clear_status_win() { window.status=""; } function changeBG(pick,mycolor) { document.getElementById(pick).style.background = mycolor; } </script> <title>Using the dom</title> </head> <body> <h1>Using the DOM</h1> <p id="para1">paragraph one text here</p> <p id="para2">paragraph two text here</p> <p id="para3">paragraph three text here</p> <hr /> <input type="button" name="Button" onClick="show_para1_status_win()" value="Show para1" /> <input type="button" name="Button" onClick="clear_status_win()" value="Clear status" /> <input type="button" onclick="changeBG('para2','red')" value="Change Background"> <hr /> </body> </html> Quote Link to comment Share on other sites More sharing options...
talksr Posted December 10, 2007 Author Share Posted December 10, 2007 Thanks phpQuestioner, it works very well. Could you explain to me how the code is getting that colour to display? There seem to be a few functions. Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 10, 2007 Share Posted December 10, 2007 this is the function for the background color change: changeBG(pick,mycolor) it has two parameters: "pick" and "mycolor" the "pick" parameter would be your elements id - example <p id="para2"> the "mycolor" parameter would be your elements background color. so in the example I provided you; your elements id was "para2" and the background color for "para2"; I set it to red. changeBG('para2','red') 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.