<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.btn-mas{ width: 130px;
display: flex;
border:1px solid #d4d4d4;
font-weight:bold;
font-family:Arial;
}
.btn-mas>span { width:25px;
text-align:center;
padding:8px 12px;
}
.btn-mas>span:first-child, .btn-mas>span:last-child { cursor:pointer;
}
.btn-mas .numero { width:100%;
border-left:1px solid #d4d4d4;
border-right:1px solid #d4d4d4;
}
</style>
</head>
<body>
<p> contador 1 </p>
<div class="btn-mas">
<span>-</span><span class="numero">1</span><span>+</span>
</div>
<p> contador 2 </p>
<div class="btn-mas">
<span>-</span><span class="numero">1</span><span>+</span>
</div>
</body>
</html>
<script>
document.querySelectorAll(".btn-mas>span:first-child, .btn-mas>span:last-child").forEach(span => { span.addEventListener("click", function(el) { const element=this.parentElement.querySelector(".numero"); let num=element.innerText;
if (this.innerText=="+") { // incrementamos
num++;
} else { // decrementanos
num--;
}
element.innerText=num;
});
});
</script>
Crear cuenta
Comentarios sobre la versión: Versión 1.0 (0)
No hay comentarios