2

Estoy haciendo un reto de Frontend Mentor, en el que cuando pinche en un numero el background quiero que sea gris. Cuando debugeo la variable numbers si me salen todos los parrafos, pero al parecer hay un error con el addEventListener o el style. He estado viendo que el fallo puede ser por la etiqueta script pero la tengo colocada al final del body.

introducir la descripción de la imagen aquí

Os dejo el código por si me podeis ayudar:

let numbers=document.querySelectorAll(".number");
    console.log(numbers)
    
    for(i=0; i <=numbers.length; i++){
    
        numbers[i].addEventListener("click", ()=>{
            numbers[i].style.backgroundColor="grey";
    
        })
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
    
      <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
      
      <title>Frontend Mentor | Interactive rating component</title>
    
      <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
      <link rel="stylesheet" href="./css/styles.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    </head>
    <body>
    
    <div class="card">
      <div class="star">
        <img src="./images/icon-star.svg" alt="">
      </div>
      <div class="text">
        <h3>How did we do?</h3>
        <p>Please let us know how we did with your support request. All feedback is appreciated 
          to help us improve our offering!</p>
      </div>
      <div class="numbers">
        <p class="number">1</p>
        <p class="number">2</p>
        <p class="number">3</p>
        <p class="number">4</p>
        <p class="number">5</p>
      </div>
      <div class="button">
        <button class="btn"> SUBMIT</button>
      </div>
    </div>
    
    </body>
    <script src="index.js"></script>
    </html>

Gracias!

0

1 respuesta 1

3

Hola hay una serie de cosas que parecen estar mal en el codigo. Estas usando el ciclo for con i <= numbers.length cuando deberias usar i<numbers.length.

El índice del arreglo comienza en cero, por lo que la última posición en un arreglo es length - 1, cuando algo da -1 significa que el elemento se ejecutara de mas y dera undefined.

Ademas de eso te recomiendo que cambies el var por el let, ya que ofrece mejoras con respecto al var.

Aca esta el codigo refactorizado:

const numbers = document.querySelectorAll(".number");
    console.log(numbers)
    
    for(let i = 0; i < numbers.length; i++){
      numbers[i].addEventListener("click", function(){
        this.style.backgroundColor="grey";
      })
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
    
      <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
      
      <title>Frontend Mentor | Interactive rating component</title>
    
      <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
      <link rel="stylesheet" href="./css/styles.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    </head>
    <body>
    
    <div class="card">
      <div class="star">
        <img src="./images/icon-star.svg" alt="">
      </div>
      <div class="text">
        <h3>How did we do?</h3>
        <p>Please let us know how we did with your support request. All feedback is appreciated 
          to help us improve our offering!</p>
      </div>
      <div class="numbers">
        <p class="number">1</p>
        <p class="number">2</p>
        <p class="number">3</p>
        <p class="number">4</p>
        <p class="number">5</p>
      </div>
      <div class="button">
        <button class="btn">SUBMIT</button>
      </div>
    </div>
    
    <script src="index.js"></script>
    </body>
    </html>

Con eso el problema deberia solucionar, exitos.

3
  • Hola! Ha sido un fallo tonto que no veía. El problema es que no había declarado la variable i en el bucle for y también el <= que decías. Gracias sandiooo
    – Pablo FC
    Commented el 27 abr. 2023 a las 11:44
  • Borro mi respuesta, que estaba en edición y al publicarla ya estaba esta. Solamente, yo usaría e.target en vez de this: algo así: numbers[i].addEventListener("click", function(e){ e.target.style.backgroundColor="grey"; }); (ver esta pregunta para más detalles).
    – A. Cedano
    Commented el 27 abr. 2023 a las 12:04
  • 1
    Hola, efectivamente tambien se puede usar: numbers[i].addEventListener("click", function(e){ e.target.style.backgroundColor="grey"; });. This se refiere al mismo elemento que e.target. Pero si usas this dentro de una función que no está asociada con un evento, se refiere al objeto global (window en un navegador). saludoss
    – sandiooo
    Commented el 27 abr. 2023 a las 12:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.