JSFiddle - React, Tailwind, and code Playground

by littleguga

HTML

<div id="result"></div>
<div class="btn" data-id="1">1</div>
<div class="btn" data-id="2">2</div>
<div class="btn" data-id="-10">-10</div>

CSS

.btn{
    background: tomato; 
    width: 30px; 
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 10px;
    display: inline-block;
    cursor: pointer;
}

JavaScript

var elements = document.querySelectorAll(".btn");
Array.prototype.forEach.call(elements, function(el, i){
	el.addEventListener("click",gag);
});

var clickcount = 1;
var result_div = document.getElementById("result");
updateResult();

function gag(e) {
    clickcount = clickcount + parseInt(this.getAttribute("data-id"));
    
    updateResult()
}

function updateResult(){
    result_div.textContent = clickcount;
}