CODEWITHSUNDEEP
javascripthtml
Amen Aziz
Amen Aziz

Reputation: 779

Color of background will not change

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

enter image description here

 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 class="container">
            <div class="row max-height align-items-center text-center">
                <div class="col">
                    <button class="btn btn-outline-secondary" onclick="Myfunction()">Click Me!</button>
                </div>
    
            </div>
    
        </div>
    
    
    
    </body>
    
    </html>

Upvotes: 0

Views: 54

Answers (3)

saeed sharghi ghazani
saeed sharghi ghazani

Reputation: 1

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 class="container">
        <div class="row max-height align-items-center text-center">
            <div class="col">
                <button class="btn btn-outline-secondary" onclick="Myfunction()">Click Me!</button>
            </div>

        </div>

    </div>



</body>

</html>

Upvotes: 0

Grumpy
Grumpy

Reputation: 2243

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

Upvotes: 0

DCR
DCR

Reputation: 15665

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 class="container">
            <div class="row max-height align-items-center text-center">
                <div class="col">
                    <button class="btn btn-outline-secondary" onclick="Myfunction()">Click Me!</button>
                </div>
    
            </div>
    
        </div>
    
    
    
    </body>
    
    </html>

Upvotes: 1

Related Questions