JSFiddle - React, Tailwind, and code Playground

by alexflav23

HTML

<button id="stylebutton">Click here</button>
    <p>Test</p>
     <p>Test</p>
     <p>Test</p>
     <p>Test</p>
     <p>Test</p>
     <p>Test</p>

CSS

.clicked {
    color: #F00;
}

JavaScript

// Get a reference to the stylebutton by id
        var button = document.getElementById("stylebutton"); 

        // Register an event listener to "click" action.
        button.addEventListener("click", function() {
            
            // Get all the paragraphs using querySelectorAll.
            var paragraphs = document.querySelectorAll("p");
            
            // Transform the result to an array.
            var p = Array.prototype.slice.call(paragraphs, 0);
            
            // Iterate through the elements returned.
            for (var i = 0, len = p.length; i < len; i++) {
                
                 // Add click to the element's className attribute.
                 p[i].className += "clicked";
            };
        }, false);