Javascript function doesnt give class

Question

I have a small thing I have to make. I need to give a CSS class to a div and this has to change the insides of the div. But my button doesn't execute the onclick or something. I don't get errors in the console.

function Naampie(){
    document.getElementById("ja").className += " pasta-di-mama";
}
    
Naampie();

.pasta-di-mama{
    color: red;
    font-size: 2em;
}

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Stuff</title>
</head>
<body>
    <div id="ja">
        <p>Spaghetti</p>
        <p>Macaroni</p>
        <p>MI</p>
        <p>Pasta Kip</p>
        <p>Pasta Salade</p>
  </div>

  <button onclick="Naampie()">Functie</button>

  <!--<script src="script.js" type="text/javascript"></script>-->
</body>
</html>

Does anyone have an idea why this isn't working?

You are calling the function ´Naampie()´ when your js loads. Could it be that the class is there from the beginning and you think its not being added because its already there? — ThatBrianDude
– ThatBrianDude, Commented Feb 11, 2019 at 14:07
Naampie(); is already called, so the div should have the class pasta-di-mama on-load... — Guntram
– Guntram, Commented Feb 11, 2019 at 14:08
Maybe it's just a copy-paste mistake, but you're missing a "." before the class name in your CSS. — Lamonde
– Lamonde, Commented Feb 11, 2019 at 14:09

James Coyle · Accepted Answer · 2019-02-11 14:08:44Z

3

You're missing the . in your CSS declaration to target the class. I'd also recommend using classList.add instead of appending to the className.

function Naampie() {
  document.getElementById("ja").classList.add("pasta-di-mama");
}

Naampie();

.pasta-di-mama {
  color: red;
  font-size: 2em;
}

<div id="ja">
  <p>Spaghetti</p>
  <p>Macaroni</p>
  <p>MI</p>
  <p>Pasta Kip</p>
  <p>Pasta Salade</p>
</div>

<button onclick="Naampie()">Functie</button>

answered Feb 11, 2019 at 14:08

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

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

1 Comment

Nikos M. Over a year ago

also add the script tag BEFORE the closing body tag i.e INSIDE the body

Mamun · Accepted Answer · 2019-02-11 14:24:41Z

1

Try classList.add(). You also forgot to precede the class with dot (.) in CSS. I will also recommend not use inline event handler:

function Naampie(){
  document.getElementById("ja").classList.add("pasta-di-mama");
}
document.getElementById('myBtn').addEventListener('click', Naampie);

.pasta-di-mama{
  color: red;
  font-size: 2em;
}

<div id="ja">
  <p>Spaghetti</p>
  <p>Macaroni</p>
  <p>MI</p>
  <p>Pasta Kip</p>
  <p>Pasta Salade</p>
</div>

<button id="myBtn">Functie</button>

edited Feb 11, 2019 at 14:24

answered Feb 11, 2019 at 14:08

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

doğukan · Accepted Answer · 2019-02-11 14:08:07Z

0

You can use classList.add("className")

function Naampie(){
document.getElementById("ja").classList.add("pasta-di-mama");
}

Naampie();

.pasta-di-mama{
  color: red;
  font-size: 2em;
}

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Shit</title>
</head>
<body>

        <div id="ja">
            <p>Spaghetti</p>
            <p>Macaroni</p>
            <p>MI</p>
            <p>Pasta Kip</p>
            <p>Pasta Salade</p>
        </div>

    <button onclick="Naampie()">Functie</button>

</body>
<script src="script.js" type="text/javascript"></script>
</html>

answered Feb 11, 2019 at 14:08

doğukan

28.1k15 gold badges67 silver badges79 bronze badges

1 Comment

Shubham Gautam Over a year ago

This solution looks good, but i will suggest not to execute Naampie immediately after declaration as it seems to me you are trying to add class after the button click.

Abderrahim Soubai-Elidrisi · Accepted Answer · 2019-02-11 14:08:20Z

0

Try add Class

function Naampie(){
document.getElementById("ja").classList.add("pasta-di-mama");
}

answered Feb 11, 2019 at 14:08

Abderrahim Soubai-Elidrisi

5,2621 gold badge31 silver badges41 bronze badges

Comments

Brad · Accepted Answer · 2019-02-11 14:14:34Z

0

Another way of doing it...add an event listener to the btn.

document.getElementById("myBtn").addEventListener("click", function() {
  document.getElementById("ja").classList.add("pasta-di-mama");
});

.pasta-di-mama {
  color: red;
  font-size: 2em;
}

<div id="ja">
  <p>Spaghetti</p>
  <p>Macaroni</p>
  <p>MI</p>
  <p>Pasta Kip</p>
  <p>Pasta Salade</p>
</div>

<button id="myBtn">Functie</button>

answered Feb 11, 2019 at 14:14

Brad

8,80811 gold badges48 silver badges54 bronze badges

Collectives™ on Stack Overflow

Javascript function doesnt give class

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related