Why doesn't jquery change my background-color?

Question

The following script doesn't execute

<script type="text/javascript">
 $("mte").css("background-color", "red");
</script>
<body>
<div id='mte'>test 123</div>
</body>

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Bugs, Jun 26 '17 at 18:54

Daniel Manta · Accepted Answer · 2017-06-26T18:59:07.487

When your script runs, the tag has not been created yet. Put your script after the div tag. Also hash symbol was missing in jQuery expression.

<div id='mte'>test 123</div>
<script type="text/javascript">
    $("#mte").css("background-color", "red");
</script>

Otherwise use $(document).ready() method, so the script will run only after page is loaded with all tags.

<script type="text/javascript">
    $(document).ready(function () {
        $("#mte").css("background-color", "red");
    });
</script>
<div id='mte'>test 123</div>

score 0 · Answer 2 · answered Jun 26 '17 at 18:38

0

<script type="text/javascript">
    document.getElementById("mte").style.backgroundColor = "red";
</script>
<body>
<div id='mte'>test 123</div>
</body>

answered Jun 26 '17 at 18:38

Andy Carson

31
10

1

document.getElementById("mte").style.backgroundColor = "red"; doesn't change the background color why is that? – user7213284 Jun 26 '17 at 18:41
you need to have it activate – Andy Carson Jun 26 '17 at 18:42
test 123 – Andy Carson Jun 26 '17 at 18:42

score 0 · Answer 3 · answered Jun 26 '17 at 18:42

The jQuery selector is not correct.

You should select it with this:

$("#mte")

That's to select elements with IDs. It's exactly the same as CSS. You were trying to select a list of HTML elements with the tag name mte which doesn't exist. Similarly, class selectors are preceded with a period or a full stop (.).

Full code is the following:

$("#mte").css("background": "#ff0000");

Also, if you are using the selection more than once, assign the selection to a constant.

const mte = $("#mte");
mte.css("background": "#ff0000");

See W3 School's jQuery selector guide: https://www.w3schools.com/jquery/jquery_ref_selectors.asp

Good luck!

score 0 · Answer 4 · answered Jun 26 '17 at 18:45

0

Try this one

<body>
<div id='mte'>test 123</div>
</body>

<script>
 $("#mte").css("background-color", "red");
</script>

answered Jun 26 '17 at 18:45

want2learn

2,247
2
16
33

Why doesn't jquery change my background-color?

4 Answers4