CSS class applied but style not showing when called from vanilla JS function

Question

I am trying to add a css class to an element in my JS script to change its style through a function but cannot figure out why it does not work.

In the example below, the container I create gets the correct class .container and the appropriate style. Then the function called pink() does add the correct class but the according style

background-color: "pink";

is not applied when called from the console.

Does anyone see what I am missing? Please note I want to learn first with plain vanilla JS.

https://repl.it/join/mtnjkrmj-etiennebrgnl

It would be helpful to all if you posted your css, html, and js. The link you provided expects a username and password. — GetSet
– GetSet, Commented Jun 5, 2020 at 7:03
is the background-color: pink not just overruled by other styling? — Ramon de Vries
– Ramon de Vries, Commented Jun 5, 2020 at 7:06
@GetSet good point, sorry for assuming it was open for everyone to see. I'll write the full code next time :) — etienne-bourganel
– etienne-bourganel, Commented Jun 5, 2020 at 7:26

GalAbra · Accepted Answer · 2020-06-05 07:11:08Z

1

First of all, you need to actually call the pink() function for it to do its magic :)

Secondly, you had semicolons in your CSS file that prevented the classes below container to be read.

Here's a fixed version of your code:

const container = document.querySelector("#container");
container.classList.add("container");


function createCell() {
    const cell = document.createElement("div");
    container.appendChild(cell);
    cell.classList.add("cell");
    return cell.classList;
};

function pink(){
    container.classList.add("pink");
    return container;
};

pink();

.container {
    display: grid;
    width: 500px;
    height: 500px;
    border-style: solid;
    border-width: 1px;
    background-color: grey;
}

.cell {
    background-color: cyan;
}

.pink {
    background-color: pink;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>rclass-test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container" class="container"></div>
    
    <script src="script.js"></script>
  </body>
</html>

answered Jun 5, 2020 at 7:11

GalAbra

5,1585 gold badges27 silver badges43 bronze badges

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

1 Comment

etienne-bourganel Over a year ago

Thanks @GalAbra! so you're saying my semi-colon in css was the issue... faceplam

Collectives™ on Stack Overflow

CSS class applied but style not showing when called from vanilla JS function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related