JSFiddle - React, Tailwind, and code Playground

For http://stackoverflow.com/questions/33114457

by Stephen

HTML

<div class="wrapper">
    <div class="num_wrapper">
        <div class="num_content"></div>
        <button class="num_pick">Pick</button>
    </div>
    <div class="num_wrapper">
        <div class="num_content"></div>
        <button class="num_pick">Pick</button>
    </div>
    <div class="num_wrapper">
        <div class="num_content"></div>
        <button class="num_pick">Pick</button>
    </div>
    <div class="num_wrapper">
        <div class="num_content"></div>
        <button class="num_pick">Pick</button>
    </div>
</div>

CSS

.wrapper {
    width:448px;
    margin:0 auto;
}
.num_wrapper {
    margin:0 5px;
    width:100px;
    height:100px;
    float:left;
    border:1px solid #333;
    background-color:#ccc;
    position:relative;
    font-family:Arial;
    font-size:60px;
    text-align:center;
}
button {
    width:100%;
    position:absolute;
    top:72px;
    left:0;
    font-size:20px;
    text-align:center;
}

JavaScript

var buttons = document.querySelectorAll("button.num_pick");
for (var i = 0; i < buttons.length; i++) {
    var thebutton = buttons[i];
    buttons[i].addEventListener("click", function (e) {
        var cont = this.parentElement.querySelector("div.num_content")
        cont.textContent = Math.floor(Math.random() * 10);
    });
}