Функция Javascript не дает класс

У меня есть небольшая вещь, которую я должен сделать. Мне нужно дать класс CSS для div, и это должно изменить внутренности 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>

Кто-нибудь знает, почему это не работает?

Вы вызываете функцию «Naampie()», когда ваш js загружается. Может ли быть так, что класс существует с самого начала, и вы думаете, что он не добавляется, потому что он уже существует?

— 11.02.2019 15:07

Naampie(); уже вызывается, поэтому div должен иметь под загрузкой класс pasta-di-mama...

— 11.02.2019 15:08

Может быть, это просто ошибка копирования и вставки, но вы пропустили "." перед именем класса в вашем CSS.

— 11.02.2019 15:09

javascript html css

11.02.2019 15:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы можете использовать 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>

Это решение выглядит хорошо, но я предлагаю не выполнять Naampie сразу после объявления, так как мне кажется, что вы пытаетесь добавить класс после нажатия кнопки.

— 11.02.2019 15:12

11.02.2019 15:08

Попробуйте добавить класс

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

11.02.2019 15:08

Ответ принят как подходящий

Вам не хватает . в объявлении 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>

также добавьте тег script ПЕРЕД закрывающим тегом body, т.е. ВНУТРИ тела

— 11.02.2019 15:13

11.02.2019 15:08

Попробуйте 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>

11.02.2019 15:08

Другой способ сделать это... добавить прослушиватель событий в 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>

11.02.2019 15:14

Другие вопросы по теме

Установите размер поля ввода / вывода в соответствии с браузером

Слайдер плохо отображается на мобильных устройствах

Загрузка файла и проверка

Функция JS работает только один раз

Как мне сгруппировать по моим строкам в угловой матовой таблице

Применить таблицу стилей к html-файлу, созданному с использованием atob

Что такое XPath для следующего элемента?

Как печатать в Jquery/Datatables

Отображать сообщение об ошибке, когда два идентификатора имеют одинаковое значение в массиве с использованием jquery

Меню опускается вместе с прокруткой страницы

Функция Javascript не дает класс

Ответы 5

Другие вопросы по теме

Похожие вопросы