0
181
VistasEl color del fondo no cambiará
Este es mi código. Quiero que click el botón. El color de fondo cambiará, pero el problema es que hago click en 1 vez. El color cambiará a red , pero hago clic en la segunda vez. El color no cambiará a yellow . Esta es la imagen. El color cambiará a rojo. pero no cambia en otros colores
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 Respuestas
Responde la pregunta0
el problema con tu código es que regresas inmediatamente cuando i = 0; Debe realizar un seguimiento de cuántas veces hace clic. definir una var fuera de la función. ver fragmento de trabajo a continuación
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
Denunciar
0
Prueba esto
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
Denunciar
0
Prueba este código, me funciona.
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
Denunciar
Responde la pregunta