He creado una pequeña matriz llamada frutas.
lo que quiero hacer es si hago clic en el siguiente botón, la página web muestra el siguiente valor de la matriz. luego, si presiono el botón anterior, la página web muestra el valor anterior de la matriz
Por favor, necesito su apoyo para acortar esto.
let fruits=['apple','mango','banana','orange'] let left = document.querySelector('.lef'); let right = document.querySelector('.rig'); let text = document.querySelector('.text'); let crunt=text.innerHTML=fruits[0]; fruits.forEach(element => { left.addEventListener('click', () => { text.innerHTML=fruits; }); }); .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); display: flex; gap: 420px; } .lef, .rig{ font-size: 70px; font-weight: 700; background: none; border: none; cursor: pointer; } .text{ width: auto; height: 50px; font-size: 30px; background-color: antiquewhite; display: grid; place-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); } <!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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"> <button class="lef"><</button> <button class="rig">></button> </div> <div class="text"></div> <script src="script.js"></script> </body> </html>Adjunte un oyente a cada botón de flecha que llama a una función correspondiente cuando se hace clic en el botón.
Inicializar el índice. Cuando se hace clic en un botón, cada función verifica si el siguiente índice está dentro de los límites de la matriz, y si aumenta o disminuye el índice, y luego actualiza el texto con el elemento de la matriz en ese nuevo índice.
const fruits = ['apple', 'mango', 'banana', 'orange'] const left = document.querySelector('.lef'); const right = document.querySelector('.rig'); const text = document.querySelector('.text'); text.textContent = fruits[0]; left.addEventListener('click', handleLeft); right.addEventListener('click', handleRight); let index = 0; function handleLeft() { if (index > 0) { text.textContent = fruits[--index]; } } function handleRight() { if (index < fruits.length - 1) { text.textContent = fruits[++index]; } } .btn,.text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn{display:flex;gap:120px}.lef,.rig{font-size:70px;font-weight:700;background:0 0;border:none;cursor:pointer}.text{width:auto;height:50px;font-size:30px;background-color:#faebd7;display:grid;place-items:center;padding:.2em .4em} <div class="btn"> <button class="lef"><</button> <button class="rig">></button> </div> <div class="text"></div>Actualmente, aplica un detector de eventos al elemento con la clase lef y ningún detector de eventos al otro botón. Además, haces esto dentro de un bucle, de modo que se aplica un detector de eventos (idéntico) para cada elemento de tu matriz. Lo que quieres hacer es algo como esto:
const fruits = ["Apple", "Mango", "Banana", "Orange"]; // Current Element let i = 0; // Text Field const text = document.querySelector(".text"); text.textContent = fruits[0]; // Event Listener: Left Button document.querySelector(".left").addEventListener("click", () => { if (--i < 0) i = fruits.length - 1; text.textContent = fruits[i]; }); // Event Listener: Right Button document.querySelector(".right").addEventListener("click", () => { i = ++i % fruits.length; text.textContent = fruits[i]; }); body { display: flex; justify-content: space-between; align-items: center; } <button type="button" class="left">Left</button> <div class="text"></div> <button type="button" class="right">Right</button>Primero, declaro una variable para realizar un seguimiento de la fruta que se muestra actualmente. Luego, muestro la primera fruta y agrego los detectores de eventos a los botones. El detector de eventos para el botón izquierdo disminuye la variable de índice o la establece en el último elemento si llegamos al primer elemento. El detector de eventos para el botón derecho incrementa la variable de índice o la establece en el primer elemento si llegamos al último elemento.
Primero recomendaría usar < y > en lugar de < y > en su HTML.
En el siguiente fragmento, los botones derecho e izquierdo escuchan los eventos y, en caso de que el índice vaya más allá de los límites de la matriz de fruits , está limitado por la resta y el operador de módulo.
let fruits = ['apple', 'mango', 'banana', 'orange'] let left = document.querySelector('.lef'); let right = document.querySelector('.rig'); let text = document.querySelector('.text'); text.innerHTML = fruits[0]; left.addEventListener('click', () => { const index = fruits.indexOf(text.innerHTML); text.innerHTML = fruits[index > 0 ? index - 1 : fruits.length - 1]; }); right.addEventListener('click', () => { const index = fruits.indexOf(text.innerHTML); text.innerHTML = fruits[(fruits.indexOf(text.innerHTML) + 1) % fruits.length]; }); .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 420px; } .lef, .rig { font-size: 70px; font-weight: 700; background: none; border: none; cursor: pointer; } .text { width: auto; height: 50px; font-size: 30px; background-color: antiquewhite; display: grid; place-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <!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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"> <button class="lef"><</button> <button class="rig">></button> </div> <div class="text"></div> <script src="script.js"></script> </body> </html>