0
    return this.each(function(){
        
        const $gameDiv = $("#rps_game");
        let $image1, $image2, $imageCaption, html;
        let gameAmount = 0;
        
        setGameStart();
        $(this).find("#gameAmount button").click(function(event){
            event.preventDefault();
            if (parseInt($(this).val()) == 1){
                gameAmount = 1;
            }else if(parseInt($(this).val()) == 3){
                gameAmount = 3;
            }else if(parseInt($(this).val()) == 5){
                gameAmount = 5;
            }
            console.log(gameAmount);
            setGameProperties();
        });
        
        $(this).find("#choices button").click(function(event){
            event.preventDefault();
            console.log("TEST");

        });function setGameProperties(){
            $gameDiv.empty();
            html = ('<img src="images\\question.png" id="player1" alt="Item 1">\
            <img src="images\\question.png" id="player2" alt="Item 2">\
            <br>\
            <h3 id="score">0 - 0</h3>\
            <br>\
            <div id="choices">\
                <button type="button" id="1" value="1">Rock</button>\
                <button type="button" id="2" value="2">Paper</button>\
                <button type="button" id="3" value="3">Sissors</button>\
            </div>');
            $gameDiv.append(html);
            $("img").css({
                "width": settings.imageWidth,
                "height": settings.imageHeight,
                "border": settings.imageBorder,
                "border-radius": settings.borderRadius
            });

            $gameDiv.css({
                "text-align": "center",
            });
        };

        function setGameStart(){
            $gameDiv.empty();
            html = ('<div id="gameAmount">\
            <button type="button" id="1game" value="1">Best of 1</button>\
            <button type="button" id="3game" value="3">Best of 3</button>\
            <button type="button" id="5game" value="5">Best of 5</button>\
            </div>');
            $gameDiv.append(html);
        };
    })
}}(jQuery))

I cannot figure out why my second click function is not working. If I move the setGameProperties() from the first click function to outside of it then my second click function works but then it skips over the setGameStart() function and goes right to the setGameProperties(). Can anyone tell me the reason I cannot use setGameProperties() inside of my click function or how I could rewrite this code to work?

Nicholas
  • 1
  • 1
  • 1
  • 4
  • 1
    Your issue is that `setGameProperties` adds *new* buttons. `$("#gameAmount button").click` only applies to the buttons that exist at the time it runs - so *not* the new buttons. Use event delegation `$("#rps_game").on("click", "#gameAmount button", function...` - and set this only once *outside* your `this.each`. – freedomn-m Nov 27 '21 at 15:20

1 Answers1

0

I think it's necessary to see your HTML as there could be a number of reasons for it not working right.

I simplified the logic and found that this code works fine so something else must be creating the problem.

Also you were trying to find the element within some random context so I changed it to work with the DOM

JS:

    setGameStart();
    $("#gameAmount button").click(function(event){
        event.preventDefault();
        console.log("hi");
        setGameProperties();
    });
    
    $("#choices button").click(function(event){
        event.preventDefault();
        console.log("TEST");

    });function setGameProperties(){
 }
    function setGameStart(){
    }

HTML:

<div id="gameAmount"><button>gameAmount</button>
</div>
<div id="choices"><button>choices</button>
</div>
montyp
  • 31
  • 1
  • 7