I want it to work as much as the value entered from the input

Question

inputField.addEventListener("keyup",(e)=>{
        let inputVal=inputField.value;
        

        if(e.key==="Enter" && inputVal.length > 0){

            //for(let i=0;i<inputVal;i++){
        
                optionImages.forEach((image,index) => {
                    image.addEventListener("click",(e)=>{    
                        image.classList.add("active");
                        
                        userResult.src = cpuResult.src="images/rock.png";
                        result.textContent= "Wait..."
            
                        optionImages.forEach((image2,index2)=>{
                            if (index!=index2) {
                                image2.classList.remove("active");
                                
                            }
                        });
                        
                        gameContainer.classList.add("start");
                        
                        
                            
                    });
            });
            //}
        }
    });

I want the code to run as much as the value entered from the input, but when I do it with a for loop, the foreach part continues to run forever.

Does this answer your question? [How to convert a string to an integer in JavaScript](https://stackoverflow.com/questions/1133770/how-to-convert-a-string-to-an-integer-in-javascript) — SuperStormer, Apr 08 '23 at 20:43

score 0 · Answer 1 · answered Apr 10 '23 at 14:03

To run the code as many times as the value entered in the input, you can use a for loop. However, in your current implementation, the forEach loop inside the keyup event listener is being attached to the optionImages array multiple times, which is causing the loop to run indefinitely.

To fix this, you can move the forEach loop outside of the keyup event listener and use a separate function to handle the click event on the images. Then, inside the keyup event listener, you can call the function as many times as the value entered in the input.

Here's an example implementation:

function handleImageClick(index) {
    optionImages.forEach((image2, index2) => {
        if (index != index2) {
            image2.classList.remove("active");
        }
    });

    image.classList.add("active");
    userResult.src = cpuResult.src = "images/rock.png";
    result.textContent = "Wait...";
    gameContainer.classList.add("start");
}

inputField.addEventListener("keyup", (e) => {
    let inputVal = inputField.value;

    if (e.key === "Enter" && inputVal.length > 0) {
        for (let i = 0; i < inputVal; i++) {
            optionImages.forEach((image, index) => {
                image.addEventListener("click", () => {
                    handleImageClick(index);
                });
            });
        }
    }
});

In this implementation, the handleImageClick function is defined outside of the keyup event listener and takes the index of the clicked image as a parameter. Inside the function, the forEach loop is used to remove the active class from all images except the clicked image, and then add the active class to the clicked image.

Inside the keyup event listener, the for loop is used to attach the click event listener to each image as many times as the value entered in the input. The handleImageClick function is called with the index of the clicked image as a parameter.

I want it to work as much as the value entered from the input

1 Answers1