Баллон / изображение, чтобы упасть на клик

Question

У меня есть шесть изображений баллона, и я хочу, чтобы каждое изображение полностью останавливалось, когда пользователь нажимал на них.Я сделал несколько тестов, но это не сработало.Я не уверен, что я делаю неправильно.Когда пользователь нажимает на изображение, я хочу, чтобы функция javascript применила анимированный класс к безделушке.В тот момент, когда я нажимаю на изображение, кажется, ничего не происходит.

    var elems = document.getElementsByClassName("bauble");
function test(idtest) {
    for(var i=0;i<elems.length;i++){
         elems[i].classList.add("animation");
     }

}

.bauble {
  z-index: 3;
}

#red {
  left: 42px;
  top: 341px;
}

#blue {
  left: 113px;
  top: 226px;
}

#green {
  left: 425px;
  top: 211px;
}

#orange {
  left: 604px;
  top: 281px;
}

#darkblue {
  left: 300px;
  top: 276px;
}

#pink {
  z-index: 1;
  left: 400px;
  top: 330px;
}

.animattion {
  animation-name: bounce;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 500px, 0);
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 300px, 0);
  }
}

<div id="container">
  <!-- baubles -->
  <img id="red" class="bauble" src="../assets/img1.png" alt="red bauble" title="red bauble" onclick="test(this.id)" />
  <img id="pink" class="bauble" src="../assets/img2.png" alt="pink bauble" title="pink bauble" onclick="test(this.id)" />
  <img id="green" class="bauble" src="../assets/img3.png" alt="green bauble" title="green bauble" onclick="test(this.id)" />
  <img id="orange" class="bauble" src="../assets/img4.png" alt="orange bauble" title="orange bauble" onclick="test(this.id)" />
  <img id="blue" class="bauble" src="../assets/img5.png" alt="blue bauble" title="blue bauble" onclick="test(this.id)" />
  <img id="darkblue" class="bauble" src="../assets/img6.png" alt="darkblue bauble" title="darkblue bauble" onclick="test(this.id)" />

</div>

Answer 1

Это будет работать в соответствии с вашим вопросом.

function test(idtest) {
var elems = document.getElementById(idtest);
  elems.classList.add("animation");
}

.bauble {
  z-index: 3;
}

#red {
  left: 42px;
  top: 341px;
}

#blue {
  left: 113px;
  top: 226px;
}

#green {
  left: 425px;
  top: 211px;
}

#orange {
  left: 604px;
  top: 281px;
}

#darkblue {
  left: 300px;
  top: 276px;
}

#pink {
  z-index: 1;
  left: 400px;
  top: 330px;
}

.animation {
  animation-name: bounce;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 500px, 0);
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 300px, 0);
  }
}

<div id="container">
  <!-- baubles -->
  <img id="red" class="bauble" src="../assets/img1.png" alt="red bauble" title="red bauble" onclick="test(this.id)" />
  <img id="pink" class="bauble" src="../assets/img2.png" alt="pink bauble" title="pink bauble" onclick="test(this.id)" />
  <img id="green" class="bauble" src="../assets/img3.png" alt="green bauble" title="green bauble" onclick="test(this.id)" />
  <img id="orange" class="bauble" src="../assets/img4.png" alt="orange bauble" title="orange bauble" onclick="test(this.id)" />
  <img id="blue" class="bauble" src="../assets/img5.png" alt="blue bauble" title="blue bauble" onclick="test(this.id)" />
  <img id="darkblue" class="bauble" src="../assets/img6.png" alt="darkblue bauble" title="darkblue bauble" onclick="test(this.id)" />

</div>

Answer 2

Я исправил это, пройдя по всему шару

var elems = document.getElementsByClassName("bauble");
function test(idtest) {
    for(var i=0;i<elems.length;i++){
        if(idtest=="red") {
            elems[0].classList.add("animation");
        }else if(idtest=="pink"){
            elems[1].classList.add("animation");

        }else if(idtest=="green"){
            elems[2].classList.add("animation");
        }else  if(idtest=="orange"){
            elems[3].classList.add("animation");

        }else if(idtest=="blue"){
            elems[4].classList.add("animation");
        }else if(idtest=="darkblue"){
            elems[5].classList.add("animation");
        }
     }

}