0
180
ViewsColor 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
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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
·
Juan Pablo Isaza
3 answers
Answer question0
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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
·
Juan Pablo Isaza
Report
0
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;
}
}
·
Juan Pablo Isaza
Report
0
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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
·
Juan Pablo Isaza
Report
Answer question