JSFiddle - React, Tailwind, and code Playground

by Vedant_Terkar

HTML

<div id="foo">click me</div>

CSS

#foo {
    background-color: #4FCCC5;
    border: solid 3px #3A9992;
    padding: 30px;
    margin: 15px;
    font-size: 2em;
    display: inline-block;
    color: #063531;
}

JavaScript

// an array of functions to call and a random number to choose which one to call
var func = [Alf,Sarah,Jon];


// the dynamically generated listener
$('#foo').on('click', function() {
    var i = Math.floor( Math.random() * 3 );
    func[i]();//pointer to function
});

// a function to be called
function Alf () {
    alert("Hi! I'm Alf");
}
function Sarah () {
    alert("Hi! I'm Sarah");
}
function Jon () {
    alert("Hi! I'm Jon");
}