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
