Lurker y nuevo en publicar aquí.
Estoy buscando una solución a esto:
<a points="0" href="#" class="btn">Button Text</a> <a points="1" href="#" class="btn">Button Text</a> <a points="2" href="#" class="btn">Button Text</a> <div class="success"></div> <div class="failure"></div>Necesito encontrar una forma para una función/bucle, para agregar el valor del atributo de datos (puntos) en una matriz, y calcular que si el resultado es> 3 para mostrar el div "éxito", de lo contrario ocultarlo y mostrar el " fracaso" div.
No tengo idea de por dónde empezar honestamente aquí y agradecería ayuda. Busqué en línea algunos resultados para armar un código, pero no había mucho sobre obtener el valor del atributo de datos al hacer clic y empujarlo a una matriz.
¡Gracias por adelantado!
De mis comentarios:
let result = []; document.addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("btn")) { result.push(+tgt.dataset.points) } if (tgt.id === "last") { const sum = result.reduce((a, b) => a + b) document.querySelector('.success').classList.toggle('hide', sum < 3) document.querySelector('.failure').classList.toggle('hide', sum >= 3) } }) .hide { display: none; } <a data-points="0" href="#" class="btn">Button Text</a> <a data-points="1" href="#" class="btn">Button Text</a> <a data-points="2" href="#" class="btn">Button Text</a> <a data-points="3" href="#" id="last" class="btn">Button Text</a> <div class="success hide">Success</div> <div class="failure hide">Failure</div>Respuesta antigua:
let sum = [...document.querySelectorAll('a[data-points]')] .map(anchor => +anchor.dataset.points) .reduce((a, b) => a + b) document.querySelector('.success').classList.toggle('hide', sum < 3) document.querySelector('.failure').classList.toggle('hide', sum >= 3) .hide { display: none; } <a data-points="0" href="#" class="btn">Button Text</a> <a data-points="1" href="#" class="btn">Button Text</a> <a data-points="2" href="#" class="btn">Button Text</a> <a data-points="3" href="#" class="btn">Button Text</a> <div class="success">Success</div> <div class="failure">Failure</div>points no es ningún atributo. Para atributos personalizados, use data-* , por lo tanto, data-points .
Aquí hay un ejemplo básico (basado en suposiciones) sobre cómo debe hacerlo.
let newArr = [...document.querySelectorAll('a')]; let sum = newArr.reduce((cum,x) => { return cum + Number(x.getAttribute('data-points')); },0); console.log(sum); if(sum > 3){ document.querySelector('.success').style.display = 'block'; document.querySelector('.failure').style.display = 'none'; } else{ document.querySelector('.success').style.display = 'none'; document.querySelector('.failure').style.display = 'block'; } <a data-points="0" href="#" class="btn">Button Text</a> <a data-points="1" href="#" class="btn">Button Text</a> <a data-points="2" href="#" class="btn">Button Text</a> <a data-points="3" href="#" class="btn">Button Text</a> <div class="success">Success</div> <div class="failure">Failure</div>a relevantes usando querySelectorAll .reduce y getAttributestyle.display para modificar los estilos.