JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<ul>
    <li class="attack">Atck1</li>
    <li class="attack">Atck2</li>
    <li class="attack">Atck3</li>
    <li class="attack">Atck4</li>
</ul>

<h1 id="attack"></h1>

JavaScript

var hero = {
    attacks: [{
        name: "atck1"
    }, {
        name: "atck2"
    }, {
        name: "atck3"
    }, {
        name: "atck4"
    }]
};
var attacks = document.getElementsByClassName("attack");
for (var i = 0; i < attacks.length; i++) {
    (function (i) {
        var atck = hero.attacks[i];
        attacks[i].addEventListener("click", function (event) {
            document.getElementById("attack").innerText = atck.name;
        })
    }(i));
}