JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>
<button id="btn6">6</button>
<button id="btn7">7</button>
<button id="btn8">8</button>
<button id="btn9">9</button>

CSS

button {
display: block;   
}

JavaScript

$(function() {
    var props = {
        text: 'Click it!',
        click: function () {
            console.log('Clicked btn:', this.id);
        }
    };
    
    var props2 = {
        value: "Click it!",
        text: "Click me!",
        click: function() {
            console.log("Clicked btn " + this.id);
        }
    };

    $('#btn1').attr(props, true);    // Changes #btn1 inner text to 'Click it!' 
                                     // and adds click handler
    $('#btn2').attr(props);          // Leaves #btn2 inner text as it is and fires 
                                     // click function on document ready
    $("#btn3").attr(props, false);   // this does not alter text, acts similar to Case #2
    
    // Case #4, acts like Case #2
    $("#btn4").attr(props2);
    
    // Case #5, acts like Case #1 (as expected)
    $("#btn5").attr(props2, true);
    
    // Case #6, acts like Case #1 (as expected)
    $("#btn6").attr(props2, function() {
        return true;
    });
    
    // Case #7, acts like Case #2, makes sense per docs
    $("#btn7").attr(props2, null);
    
    // Case #8, however, acts like Case #1, which seems 
    // contrary to documentation, which states if the 
    // function returns undefined or nothing, the attr will
    // not be set
    $("#btn8").attr(props2, function() {
        return null;
    });
    
    // Case #9, also acts like Case #1, which seems 
    // contrary to documentation, which states if the 
    // function returns undefined or nothing, 
    // "function(index, attr){}" that the attr will
    // not be set.
    $("#btn9").attr(props2, function(index, attr){});    
});