JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<div class="audio">
   <p>Звук-1!</p>
</div>
<div class="audio">
   <p>Звук-2!</p>
</div>
<div class="audio">
   <p>Звук-3!</p>
</div>
<div class="audio">
   <p>Звук-4!</p>
</div>

CSS

.audio{
    display:block;
    text-align:center;
    margin:10px 10px;
    width: 100px;
    height: 100px;
    background: #444;
    color: #fff;
    font-weight: bold;
    float:left;
    cursor:pointer;
}
p{
  line-height: 50px;
}

JavaScript

var blocks = document.querySelectorAll('.audio');
        for(var i = 0; i < blocks.length; i++) {
            var block = blocks[i];
            var stadia = 0;
            block.onclick = function() {
                //действие при клике
                
                     this.style.backgroundColor = 'red';
                     this.style.color = 'black';
               
            }//конец функции
        }//конец цикла