Esta es una función de agregar al carrito. Entonces, básicamente, cuando presioné el botón Agregar carrito, mostrará el número en el ícono del carrito allí. Pero no funciona en absoluto en el primer clic, pero el segundo clic funciona bien.
//cart function function cartAdd() { let cart = document.querySelector('.cart'); let add = document.querySelectorAll('.add'); for (let but of add) { cart.setAttribute('data-count', 0); but.onclick = () => { let item = Number(cart.getAttribute('data-count') || 0); cart.setAttribute('data-count', item + 1); cart.classList.add('on'); } } } .cart i { position: relative; font-size: 30px; cursor: pointer; margin: 0px 10px; top: 18PX; } .cart::after { position: absolute; content: attr(data-count); width: 15px; height: 15px; font-size: 12px; border-radius: 15px; text-align: center; background-color: red; color: white; cursor: pointer; z-index: 1; opacity: 0; } .cart.on::after { opacity: 1; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <li class="cart"> <i class="fa fa-shopping-cart"></i></li> <button class="add" onclick="cartAdd()">Add-cart</button>He usado console.log('hola') dentro de but.onclick pero tampoco mostrará el 'hola' para el primer clic.
Debido a que ya tiene un detector de eventos onclick="cartAdd()" , no necesita uno en js. Elimine eso, agregue consulta/bucle y establezca en 0 y debería funcionar como se esperaba
//cart function function cartAdd() { let cart = document.querySelector('.cart'); let item = Number(cart.getAttribute('data-count') || 0); cart.setAttribute('data-count', item + 1); cart.classList.add('on'); } .cart i { position: relative; font-size: 30px; cursor: pointer; margin: 0px 10px; top: 18PX; } .cart::after { position: absolute; content: attr(data-count); width: 15px; height: 15px; font-size: 12px; border-radius: 15px; text-align: center; background-color: red; color: white; cursor: pointer; z-index: 1; opacity: 0; } .cart.on::after { opacity: 1; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <li class="cart"> <i class="fa fa-shopping-cart"></i></li> <button class="add" onclick="cartAdd()">Add-cart</button>pero tampoco mostrará el 'hola' para el primer clic
Pero se muestra para el segundo clic, ¿correcto? Entonces, ¿qué sucede en el tercer clic? ¿Y el cuarto? ¿Cuántas veces muestra ese mensaje con cada clic posterior?
Esto se debe a lo que hace el código en cada clic. Específicamente, ¿qué hace la función cartAdd ?
Agrega un controlador de eventos de clic a los botones.
No ejecuta ese controlador, solo lo agrega. Así que ahora el botón tiene dos controladores de eventos de clic. La función cartAdd y la función handler que se acaba de agregar. Así que vuelve a hacer clic en él y ambas funciones se ejecutan. Uno de los cuales agrega otro controlador de eventos de clic.
Y así sucesivamente y así sucesivamente.
No agregue controladores de eventos como parte del evento. Solo agrégalos. Deshágase de onclick="cartAdd()" por completo y simplemente agregue el controlador cuando se cargue la página (o cuando existan los elementos):
let cart = document.querySelector('.cart'); let add = document.querySelectorAll('.add'); for (let but of add) { cart.setAttribute('data-count', 0); but.onclick = () => { let item = Number(cart.getAttribute('data-count') || 0); cart.setAttribute('data-count', item + 1); cart.classList.add('on'); } } .cart i { position: relative; font-size: 30px; cursor: pointer; margin: 0px 10px; top: 18PX; } .cart::after { position: absolute; content: attr(data-count); width: 15px; height: 15px; font-size: 12px; border-radius: 15px; text-align: center; background-color: red; color: white; cursor: pointer; z-index: 1; opacity: 0; } .cart.on::after { opacity: 1; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <li class="cart"> <i class="fa fa-shopping-cart"></i></li> <button class="add">Add-cart</button> //cart function function cartAdd() { let cart = document.querySelector('.cart'); let add = document.querySelectorAll('.add'); for (let but of add) { cart.setAttribute('data-count', 0); but.onclick = () => { let item = Number(cart.getAttribute('data-count') || 0); cart.setAttribute('data-count', item + 1); cart.classList.add('on'); } but.click('trigger'); } } .cart i { position: relative; font-size: 30px; cursor: pointer; margin: 0px 10px; top: 18PX; } .cart::after { position: absolute; content: attr(data-count); width: 15px; height: 15px; font-size: 12px; border-radius: 15px; text-align: center; background-color: red; color: white; cursor: pointer; z-index: 1; opacity: 0; } .cart.on::after { opacity: 1; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <li class="cart"> <i class="fa fa-shopping-cart"></i></li> <button class="add" onclick="cartAdd()">Add-cart</button>aquí no es necesario cambiar su código, solo agregué el activador para el evento de primer clic y su código funciona bien, también puede consultar el código de jsfiddle