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.

Nate Anderson · Accepted Answer · 2024-09-09 17:50:55Z

7

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.

edited Sep 9, 2024 at 17:50

Nate Anderson

21.6k22 gold badges113 silver badges155 bronze badges

answered Jul 29, 2016 at 7:26

Oskar Szura

2,5795 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sandeep Roy Over a year ago

Thanks for educating & your time. Please help with a good book for JavaScript for a beginner.

Oskar Szura Over a year ago

Try this one: shop.oreilly.com/product/9780596517748.do - It think it's the best for start.

Sandeep Roy Over a year ago

Thanks again Sir, have a nice day.

Tuğca Eker · Accepted Answer · 2016-07-29 07:26:29Z

2

In this case red is variable. You should use string instead. Use

x.style.color='red';

answered Jul 29, 2016 at 7:26

Tuğca Eker

1,49313 silver badges20 bronze badges

Comments

user6573425 · Accepted Answer · 2016-07-29 07:32:21Z

2

Syntax mistake

x.style.color='red';

answered Jul 29, 2016 at 7:32

user6573425

Comments

Himanshu Sharma · Accepted Answer · 2016-09-01 12:17:15Z

2

Correct - red color assign as a string name or value(hex color code like '#ff0000') of the color.

Syntax- object.style.color="color|initial|inherit"

x.style.color='red';
x.style.color='#ff0000';

You can see the live demo on Fiddler

<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>

edited Sep 1, 2016 at 12:17

answered Jul 29, 2016 at 9:29

Himanshu Sharma

336 bronze badges

1 Comment

Sandeep Roy Over a year ago

Thanks for educating.

James · Accepted Answer · 2016-07-29 07:30:04Z

1

Missing quote at the line below.

x.style.color='red';

answered Jul 29, 2016 at 7:30

James

1,4761 gold badge13 silver badges25 bronze badges

1 Comment

Sandeep Roy Over a year ago

Thanks you for you time.

Kamal kannan · Accepted Answer · 2016-07-29 09:31:30Z

1

Try this it works,

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

answered Jul 29, 2016 at 9:31

Kamal kannan

2531 gold badge3 silver badges19 bronze badges

2 Comments

Kamal kannan Over a year ago

@Himanshu Sharma assign id value in variable and changed it's style but i try to change without variable name.

Sandeep Roy Over a year ago

this approach seems more compact, i don't have to assign variables, then follow other the procedures. Now simply i can directly assign the changes i want to do. Thanks for educating. I really appreciate.

Collectives™ on Stack Overflow

JavaScript not changing HTML Styles

6 Answers 6

3 Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related