i am a beginner to java script.i do the bellow code for changing the text color into red using java script.But it doesn't work.what is the error in my code?
<!DOCTYPE html> <html> <head> <script> function display() { var col=document.getElementById("demo").innerHTML; col.style.color="red"; } </script> </head> <body> <h1>My First JavaScript</h1> <p id="demo">click on the button bellow.....</p> <button onclick="display()">Display</button> </body> </html> Remove innerHTML from var col=document.getElementById("demo").innerHTML;
<!DOCTYPE html> <html> <head> <script> function display() { var col=document.getElementById("demo"); col.style.color="#FF0000"; } </script> </head> <body> <h1>My First JavaScript</h1> <p id="demo">click on the button below.....</p> <button onclick="display()">Display</button> </body> </html> Dont use the innerHTML, it returns a String.
Use the style on the object itself.
Check out it working: JsFiddle
You can try this ...
document.getElementById('demo').style.color = '#FF0000'; Replace this code:
function display() { var col=document.getElementById("demo").innerHTML; col.style.color="red"; } with this:
function display() { var col=document.getElementById("demo"); col.style.color="red"; } Inner html would contain the html inside the demo tag, but you need to refer to the tag itself.
<!DOCTYPE html> <html> <head> <script> function display() { document.getElementById("demo").style.color="red"; } </script> </head> <body> <h1>Your Fixed JavaScript</h1> <p id="demo">click on the button bellow.....</p> <button onclick="display()">Display</button> </body> </html>Here's the fixed one I just made the change of the words turn red because it wasn't
