How do I get this button to add a class to an element? (No JQuery Please)-CodePudding

I am trying to get a video to rotate when a button is click on. I am really rusty on my beginner JS skills and can't figure this simple thing out. Anyways maybe I am getting mixed up but can someone explain to me why this isn't working?

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>

CodePudding user response：

I'm not too sure if this is the answer, but instead of

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

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

So remove the dot in front of the video-rotate.

CodePudding user response：

It seams your addRotation() function implementation takes a video parameter but the actual function is not accepting it. And also you need to add the class name without the period like so

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


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

Hope this works :)