3

Estoy haciendo un tipo de carrito de compras, creando una lista de productos , a través de javascript, hasta ahí todo bien, ahora cuando le doy click a algun producto logre que me retornara un HTMLCollection en forma de array, ya que hay 9 productos tengo HTMLCollection(9)

let prod = document.getElementsByClassName('product')

for(let i = 0;i < prod.length;i++){
  prod[i].addEventListener('click', function(){
    console.log(prod[i])
  })
}

en el prod[i] me devuelve un producto con esta estructura

<div class="product">
      <p class="title">Producto 1</p>
      <div class="icon"></div>
      <p class="price">$ 100</p>
    </div>

Ahora lo que no logro hacer es obtener solo el nombre que seria 'Producto 1' y el precio que seria '100'

para posteriormente colocarlo en una tabla.

Espero alguien me pueda ayudar o decirme alguna otra forma de conseguir lo que quiero . muchas gracias de antemano :D

1 respuesta 1

0

Con jQuery seria mas facil. pero con vanilla javascript seria asi:

let prod = document.getElementsByClassName('product')

for(let i = 0;i < prod.length;i++){
  prod[i].addEventListener('click', function(){
    
    let pro = prod[i].firstChild.nextElementSibling;
    let price = pro.nextElementSibling.nextElementSibling;
    
    console.log("Producto: " + pro.innerHTML + "  Precio: " + price.innerHTML);
  })
}
<div class="product">
      <p class="title">Producto 1</p>
      <div class="icon"></div>
      <p class="price">$ 100</p>
    </div>
    <div class="product">
      <p class="title">Producto 2</p>
      <div class="icon"></div>
      <p class="price">$ 1002</p>
    </div>
    <div class="product">
      <p class="title">Producto 3</p>
      <div class="icon"></div>
      <p class="price">$ 500</p>
    </div>

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.