RanchWest Posted September 6, 2021 Share Posted September 6, 2021 I would like to interactively change the color of an HTML element -- for instance, a table row. I know how to initially set the color and I am somewhat familiar with CSS. I know a little about forms. I would like to have a checkbox form that on submit would change, say, a table row color. What would be a simple way to do that? Link to comment Share on other sites More sharing options...
niche Posted September 6, 2021 Share Posted September 6, 2021 something like this might work for you: https://www.w3schools.com/js/js_htmldom_css.asp Link to comment Share on other sites More sharing options...
RanchWest Posted September 6, 2021 Author Share Posted September 6, 2021 Niche, That's basically what I want, but I want to provide input that would change the bgcolor of the <TR> element. That's the part that I don't know how to do. Link to comment Share on other sites More sharing options...
RanchWest Posted September 7, 2021 Author Share Posted September 7, 2021 (edited) Here is my basic page: <html> <body> <table> <tr id="MyRow" style=background-color:lightgray;><td>Column 1</td><td>Column 2</td></tr> </table> </body> </html> I want the user to be able to change MyRow to toggle to background-color:white or toggle back to background-color:lightgray through a mouse action... through a form or whatever. Not a mouseover, though. Edited September 7, 2021 by RanchWest Link to comment Share on other sites More sharing options...
RanchWest Posted September 7, 2021 Author Share Posted September 7, 2021 I figured out an approach that is okay: <html><body> <table> <script> function changeBG() { var selectedBGColor = document.getElementById("bgchoice").value; document.getElementById("myChoice").style.backgroundColor = selectedBGColor; } </script> <br> 1 <select id="bgchoice" size=2 onchange="changeBG()" > <option value="white">In</option> <option value="lightgray">Scratch</option> </select> <tr id="myChoice" style=background-color:lightgray;><td>Column 1</td><td>Column 2</td></tr> </table> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now