Color of background will not change-CodePudding

This is my code I want that I click the button background color will be change but the issue is that I click on 1 time color will change to red but I click 2nd time color will not change to yellow This is pic color will change to red but it not change on another colors

 arr = ["red", "yellow", "blue", "green"];
    
    
     function Myfunction() {
    
         for (let i = 0; i < arr.length; i  ) {
             const correct = document.querySelector('body')
             return correct.style.backgroundColor = arr[i]
    
    
    
         }
     }

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="sty.css">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <script src="main.js"></script>
    
    </head>
    
    <body>
        <div >
            <div >
                <div >
                    <button  onclick="Myfunction()">Click Me!</button>
                </div>
    
            </div>
    
        </div>
    
    
    
    </body>
    
    </html>

CodePudding user response：

the problem with your code is you return immediately when i = 0; You need to keep track of how many time you click. define a var outside the function. see working snippet below

arr = ["red", "yellow", "blue", "green"];
    
    let i = -1;
     function Myfunction() {
    
             i  ;
             i = i % 4;  //why do I do this?
             const correct = document.querySelector('body')
             return correct.style.backgroundColor = arr[i]
    
    
    
        
     }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="sty.css">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <script src="main.js"></script>
    
    </head>
    
    <body>
        <div >
            <div >
                <div >
                    <button  onclick="Myfunction()">Click Me!</button>
                </div>
    
            </div>
    
        </div>
    
    
    
    </body>
    
    </html>

CodePudding user response：

Try this

arr = ["red", "yellow", "blue", "green"];
var counter = 0;

 function Myfunction() {
      
         document.querySelector('body').style.backgroundColor = arr[counter]
     counter  ;
     if(counter >= arr.length){
       counter=0;
     }
 }

CodePudding user response：

Try this code it work for me.

arr = ["red", "yellow", "blue", "green"];
var numberOfclicked = 0;

function Myfunction() {
 if(numberOfclicked > arr.length-1)
        numberOfclicked = 0;
 const correct = document.querySelector('body');  
 correct.style.backgroundColor = arr[numberOfclicked];   
 
     numberOfclicked  ;

}

arr = ["red", "yellow", "blue", "green"];
var numberOfclicked = 0;

 function Myfunction() {
     if(numberOfclicked > arr.length-1)
            numberOfclicked = 0;
     const correct = document.querySelector('body');  
     correct.style.backgroundColor = arr[numberOfclicked];   
     
         numberOfclicked  ;

 }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="sty.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="main.js"></script>

</head>

<body>
    <div >
        <div >
            <div >
                <button  onclick="Myfunction()">Click Me!</button>
            </div>

        </div>

    </div>



</body>

</html>