Блог

Главная - Вопросы по программированию - Как я могу получить эту кнопку, чтобы добавить класс в элемент? (Без jQuery, Пожалуйста)

Как я могу получить эту кнопку, чтобы добавить класс в элемент? (Без jQuery, Пожалуйста)

#javascript #html #css #dom #addeventlistener

Вопрос:

Я пытаюсь заставить видео вращаться при нажатии на кнопку. Я действительно подзабыл свои навыки JS для начинающих и не могу понять эту простую вещь. В любом случае, может быть, я что-то путаю, но может ли кто-нибудь объяснить мне, почему это не работает?

 let video = document.querySelector('.video');
let rotateBtn = document.querySelector('.rotate-btn');

function addRotation() {
  video.classList.add('.video-rotate');
}

rotateBtn.addEventListener('click', function() {
  addRotation(video);
}); 
 * {
  box-sizing: border-box;
}

#demo-container {
  text-align: center;
}

.video-rotate {
  transform: rotate(270deg);
} 
 <div class="live-demo">
  <h1 class="live-demo-title">Live Demo</h1>

  <div class="rotate">
    <button class="rotate-btn">Rotate</button>
  </div>

  <div id="demo-container">
    <video class="video" width="500px" height="700px" controls autoplay>
      <source src="media/myFlix-Iphone-LiveDemo.mp4" type="video/mp4">
      <source src="media/myFlix-Iphone-LiveDemo.ogg" type="video/ogg">
  Your browser does not support the video tag.
    </video>
  </div>
</div>

Комментарии:

1. Вы не указываете имя . класса при вызове .classList.add()

2. video.classList.add('video-rotate');

3. все еще не работает

4. Это сработало, когда я попробовал.

Ответ №1:

Я не слишком уверен, что это ответ, но вместо

 video.classList.add(".video-rotate");

делать

 video.classList.add("video-rotate");

Поэтому удалите точку перед видео-поверните.

Ответ №2:

Похоже, что реализация функции addRotation() принимает параметр видео, но фактическая функция его не принимает. А также вам нужно добавить имя класса без точки вот так

 function addRotation(video) {
  video.classList.add('video-rotate');
}


rotateBtn.addEventListener('click', function() {
  addRotation(video);
});

Надеюсь, это сработает 🙂

Комментарии:

1. Функция использует глобальную переменную video .

Метки: , ,