Включение нескольких элементов одновременно

Question

Есть два элемента в виде диска когда я нажимаю на кнопку включение вращается только один диск. А как сделать так что бы при нажатии на кнопку включалось оба диска один вращался в лево другой в право

var sound = document.getElementById('sound');
var img = document.getElementById('rotateImg');
var img = document.getElementById('rotateImg2');
 
function rotate(action) {
  img.style.animationPlayState = action;
  if (action =='running') { sound.play()
  } else { sound.stop() }
}

#rotateImg {
  animation: 1s myRotate infinite linear paused;
}
#rotateImg2 {
  animation: 1s myRotate infinite linear paused;
} 
 
@keyframes myRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.circle{

border-radius: 100%;

background: red;

width: 100px;

height: 100px;
}

<div class="wrapper">
  <img class="circle"  id="rotateImg">
  <img class="circle" id="rotateImg2"> 
</>
<audio id="sound" src="http://www.html5tutorial.info/media/vincent.ogg"></audio>
<button onclick="rotate('running');">Крутить пластинку</button>
<button onclick="rotate('paused');">Остановить</button>

Answer 1

Одному задать направление reverse в CSS

Также вы два раза объявляете переменную img, а нужно img и img2

let sound = document.getElementById('sound');
let img = document.getElementById('rotateImg');
let img2 = document.getElementById('rotateImg2');
 
function rotate(action) {
    img.style.animationPlayState = action;
    img2.style.animationPlayState = action;
    
    if (action =='running') { 
        sound.play()
    } else { 
        sound.stop() 
    }
}

#rotateImg {
  animation: 1s myRotate infinite linear paused;
}
#rotateImg2 {
  animation: 1s myRotate infinite linear paused reverse;
} 
 
@keyframes myRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.circle{

border-radius: 100%;

background: red;

width: 100px;

height: 100px;
}

<div class="wrapper">
  <img class="circle"  id="rotateImg">
  <img class="circle" id="rotateImg2"> 
</>
<audio id="sound" src="http://www.html5tutorial.info/media/vincent.ogg"></audio>
<button onclick="rotate('running');">Крутить пластинку</button>
<button onclick="rotate('paused');">Остановить</button>

БЛОГ НА HUSL

Включение нескольких элементов одновременно

Ответы (1 шт):