Some Javascript code not working, only jquery code

Question

I have an external javascript file where I wrote jquery code and javascript code but the javascript code isn't working. Only the alert is working.

I want some texts to flash different colors but it doesn't.

When I inspect elements using ctrl+shift+i I see the colors changing under inspect element, but it doesn't change in the webpage.

Something like it's running on the background or what I really don't know.

function flash() { var text = document.getElementById('sales'); text.style.color=(text.style.color=='red')? 'green' : 'red'; } var clr = setInterval(flash, 500)

<p id="sales"> <h3 style ="text-align: center; font-weight: bold;"> Flash Sales </h3></p>

Please show a minimal reproducible example contain all relevant HTML, css and js code. — t.niese
– t.niese, Commented Sep 19, 2021 at 14:47
Welcome to SO. You might find reading the site help section useful when it comes to asking a good question, and this question checklist. Code that you've worked on to solve the problem should include a minimal reproducible example, and be included in your question. — Andy
– Andy, Commented Sep 19, 2021 at 14:50

Phylogenesis · Accepted Answer · 2021-09-19 15:41:19Z

2

If you properly check the inspection, you'll see that your HTML was changed from what you have. A <p> element cannot contain a <h3> element, and the DOM has been changed to <p id="sales"></p><h3>...</h3>.

As such, your CSS is being applied to the wrong place.

function flash() { var text = document.getElementById('sales'); text.style.color=(text.style.color=='red')? 'green' : 'red'; } var clr = setInterval(flash, 500)

<h3 id="sales" style ="text-align: center; font-weight: bold;"> Flash Sales </h3>

answered Sep 19, 2021 at 15:41

Phylogenesis

7,91024 silver badges27 bronze badges

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

2 Comments

t.niese Over a year ago

If you properly check the inspection, you'll see that your HTML was changed that's a bit inaccurate, you don't inspect HTML there but the resulting DOM.

Skynet Over a year ago

Yes, I realised that the problem is from the <h3> tag so I removed it and applied styling in the css and it worked. Thanks

Skynet · Accepted Answer · 2021-09-19 16:04:25Z

0

I was able to solve the issue by removing the in-line styling all the way from the <h3 tag and styled it in css.

answered Sep 19, 2021 at 16:04

Skynet

476 bronze badges

Comments

Ruvee · Accepted Answer · 2021-09-19 14:42:25Z

-1

In pure java script

document.querySelector('element name').style.color = 'red';

In jquery

$('element name').css({red : 'red'});

edited Sep 19, 2021 at 14:42

Ruvee

9,1544 gold badges23 silver badges48 bronze badges

answered Sep 19, 2021 at 14:39

Dipen Bedia

11 bronze badge

4 Comments

Skynet Over a year ago

This is the code in html: <p id="sales"> <h3 style ="text-align: center; font-weight: bold;"> Flash Sales </h3></p>

Andy Over a year ago

This doesn't explain the JS code that you have a problem with because you haven't added that to the question. @Skynet. We can't debug code we can't see.

Skynet Over a year ago

And this is the javascript code: function flash() { var text = document.getElementById('sales'); text.style.color=(text.style.color=='red')? 'green' : 'red'; } var clr = setInterval(flash, 500);

Skynet Over a year ago

Please how do I separate lines here on stackoverflow because when I click enter on my phone keyboard it just posts whatever I'm typing

Collectives™ on Stack Overflow

Some Javascript code not working, only jquery code

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related