Both buttons work together .. - javascript

Question

I'm trying to have only one button working at one time .. and it does not work in any way .. Although I do listener on both separately, and ID changed ..

I tried different options and could not reach a solution

help please

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>

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;
    }

abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgab

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

I played around with your code a bit on codepen. Though your question is a bit vague, but I suspect that the issue you are having is that you are doing:

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

Instead of

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

Explanation: You are supposed to apply event listeners to buttonStart and buttonReset and not equate it to them.