JavaScript not changing HTML Styles

Question

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 1

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.

JavaScript not changing HTML Styles

Sign up