Question

我有一件小事要做。我需要给div一个CSS类，这必须改变div的内部。但是我的按钮没有执行onclick之类的东西。我在控制台中没有收到错误。

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>

有人知道为什么它不起作用吗？

Answer 1

您在CSS声明中缺少用于定位该类的.。我还建议您使用classList.add而不是附加到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>

Answer 2

尝试classList.add()。您还忘记了在CSS中以类（.）开头。我还将建议不要使用内联事件处理程序：

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>

Answer 3

您可以使用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>

Answer 4

尝试添加课程

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

Answer 5

另一种实现方法...向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>

JavaScript函数不给类

5 个答案: