Sandeep Roy Sandeep Roy - 3 months ago 9
HTML Question

JavaScript not changing HTML Styles

I am trying to change the color of my name, by clicking on a button. Here is what I've done till now,

<html>
<head><title></title></head>
<body>
<p id="demo">Sandeep Roy</p>
<button type="button" onclick="change()">Click</button>
<script>
function change() {
var x=document.getElementById("demo");
x.style.color=red;
}
</script>
</body>
</html>


The expected output is a red font, when 'click' button is clicked.

Unfortunately nothing happens when I do that, i.e same black color font.
Please help me educating in this matter.

Answer

In the below, you're missing quotas

var x=document.getElementById("demo");
x.style.color=red;

should be

var x=document.getElementById("demo");
x.style.color='red';

besides that - this approach is awful. Toggling classes is more preffered.