두 버튼이 함께 작동 .. - javascript

Question

한 번에 하나의 버튼 만 작동 시키려고하고 있습니다 ... 어떤 식 으로든 작동하지 않습니다 .. 두 가지 모두에서 수신기를 사용하지만 ID가 변경되었습니다.

나는 다른 옵션을 시도하고 해결책

제발 도와

https://codepen.io/ido4560/pen/dZxqvZ 

HTML

<div class="buttons"> 
    <button id="buttonStart">Start Game</button> 
    <button id="buttonReset">Reset</button> 
</div> 
<div id="main"> 
    <div id="first"> 
     <div data-il="The Zombie" class="anim1"></div> 
    </div> 
    <div id="second"> 
     <div data-il="The Man" class="anim2"></div> 
    </div> 
    <div id="third"> 
     <div data-il="The Woman" class="anim3"></div> 
    </div> 
</div> 
<span>Score: </span> 

0,123,516에 도달 할 수

CSS

 @keyframes zombieWalk { 
     0% { 
      background-position: 0px 0px; 
     } 
     100% { 
      background-position: 1191px 0px; 
     } 
    } 

    @keyframes manWalk { 
     0% { 
      background-position: -5px 2px; 
     } 
     100% { 
      background-position: -993px 6px; 
     } 
    } 

    @keyframes womanWalk { 
     0% { 
      background-position: -21px 0px; 
     } 
     100% { 
      background-position: -1020px 0px; 
     } 
    } 

    body { 
     background-color: black; 
     margin: 10px auto; 
     width: 1000px; 
     text-align: center; 
    } 

    #main { 
     border: 2px solid white; 
    } 

    #main>#first { 
     background-color: red; 
     height: 179px; 
    } 

    #main>#first>div { 
     height: 167px; 
     width: 133px; 
     background: url(zombie.png) 0px 0px; 
     background-size: 1323px 168px; 
     background-color:white; 
    } 

    #main>#second { 
     background-color: blue; 
     height: 173px; 
    } 

    #main>#second>div { 
     height: 162px; 
     width: 133px; 
     background: url(man.png) -5px 2px; 
     background-size: 1126px 163px; 
     background-color:white; 

    } 

    #main>#third { 
     background-color: yellow; 
     height: 168px; 
    } 

    #main>#third>div { 
     height: 167px; 
     width: 133px; 
     background: url(woman.png) -21px 0px; 
     background-size: cover; 
     background-color:white; 
    } 


    #main>#first>.zombieWalk { 
     animation: zombieWalk 1s steps(9) infinite; 
     transform: translate(860px, 0px); 
     animation-play-state: running; 
    } 


    #main>#second>.manWalk { 
     animation: manWalk 1s steps(7) infinite; 
     transform: translate(860px, 0px); 
     animation-play-state: running; 
    } 

    #main>#third>.womanWalk { 
     animation: womanWalk 1s steps(6) infinite; 
     transform: translate(860px, 0px); 
     animation-play-state: running; 
    } 

    .buttons>button { 
     font-size: 20px; 
     margin: 10px 50px 20px 50px; 
    } 

    span { 
     color: red; 
     font-weight: bold; 
     line-height: 20px; 
     font-family: arial; 
    } 

codepen에 나는 약간의 코드와 함께 놀았

JS

/* Global var */ 
    var div = document.querySelectorAll("#main>div>div"); 
    var flag = 1; 
    var span = document.querySelector("span"); 

    function runGame() { 
     var buttonStart = document.getElementById("buttonStart"); 
     console.log(buttonStart); 
     buttonStart = addEventListener("click", startGame); 
     var buttonReset = document.getElementById("buttonReset"); 
     console.log(buttonReset); 
     buttonReset = addEventListener("click", startAgain); 
     var number = rndNumber(); 
     div[0].style.transition = 'transform ' + (rndNumber()) + 'ms'; 
     //console.log(number); 
     var number = rndNumber(); 
     div[1].style.transition = 'transform ' + (rndNumber()) + 'ms'; 
     //console.log(number); 
     var number = rndNumber(); 
     div[2].style.transition = 'transform ' + (rndNumber()) + 'ms'; 
     //console.log(number); 
     div[0].addEventListener("transitionend", animEnd); 
     div[1].addEventListener("transitionend", animEnd); 
     div[2].addEventListener("transitionend", animEnd); 

    } 

    function animEnd(e) { 
     //console.log('im end'); 
     //console.log(e); 
     console.log(flag); 
     if (flag == 1) { 
      var player = e.target.getAttribute("data-il"); 
      //console.log(player + ' first'); 

      span.innerHTML += "<br>"; 
      span.innerText += '#1 ' + player; 
      //console.log(span); 
      flag++; 
     } else if (flag == '2') { 
      var player = e.target.getAttribute("data-il"); 
      //console.log(player + ' second'); 

      span.innerHTML += "<br>"; 
      span.innerText += '#2 ' + player; 
      span.innerHTML += "<br>"; 
      flag++; 
     } else if (flag == '3') { 
      var player = e.target.getAttribute("data-il"); 
      //console.log(player + ' third'); 

      span.innerText += '#3 ' + player; 
     } 

    } 

    function startGame() { 
     div[0].className = "zombieWalk"; 
     div[1].className = "manWalk"; 
     div[2].className = "womanWalk"; 
    } 


    function rndNumber() { 
     return Math.floor(Math.random() * 10000); 
    } 
    function startAgain(){ 
     window.location.reload(false); 
    } 
    runGame(); 

Answer 1

abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgab. 귀하의 질문은 조금 모호하지만, 나는 당신이 겪고있는 문제가 일을되는 것으로 생각하지만 :

buttonStart = addEventListener("click", startGame); buttonReset = addEventListener("click", startAgain);

대신 설명

buttonStart.addEventListener("click", startGame); buttonReset.addEventListener("click", startAgain);

의 : 당신이 적용되어 있습니다 이벤트 리스너를 buttonStart 및 buttonReset으로 변경하고 동일한 것으로 간주하지 않습니다.