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.
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 - changing the style properties directly may not be the best approach. Instead, change the className, and use CSS to style classes to look different.
In this case red is variable. You should use string instead. Use
x.style.color='red';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With