JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="wrapper">
    <div class="container">
        <div class="output-container"></div>
        <div class="buttons-container">
            <input type="button" value="1">
            <input type="button" value="2">
            <input type="button" value="3">
            <input type="button" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <input type="button" value="7">
            <input type="button" value="8">
            <input type="button" value="9">
            <input type="button" value="10">
        </div>
    </div>
</div>

CSS

.buttons-container{
    width: 100px;
    border: 1px solid blue;
}

JavaScript

function showValue(event) {
    var target = event.target || event.srcElement;
    
    //console.log( target.value ); если нажмешь F12 в хроме, то увидишь, чему равно значение нажатой кнопки
    alert(target.value);
}
//навешиваем обработчик событий на клик по документу. В данном случае, у нас будет срабатывать функция showValue при каждом клике не только по 
document.body.addEventListener('click', showValue);