JSFiddle - React, Tailwind, and code Playground

by chacha69

HTML

Hello
<button id="myButton">click me</button>

<textarea id="output" rows="4" cols="50">
This is my output
</textarea>

<textarea id="myArea" rows="4" cols="50">
This is a text area
</textarea>

JavaScript

var mediator = $({});    // <- allows it to use 'on' and 'trigger'


var display = function() {
 
    
    mediator.on('newData', function(e, params){
       alert('display has newData');
        
        $('#output').html("received a newData event:" + params.name);
    });
};

display();

$("#myButton").click(function() {
    mediator.trigger('newData', {
            name: 'Neo'
    });
    
    }
);


$("#myArea").keyup( function() {
    console.log("keyup");   
    
}
);

/*
var obj1 = {
    start: function(){
        mediator.on('go', function(){
            alert('Obj1 started');
        });
    },
    
    send: function(){
        mediator.trigger('message', {
            name: 'Neo'
        });
    }
}

var obj2 = {
    start: function(){
        mediator.on('go', function(){
            alert('Obj2 started');
        });
    },
    
    respond: function(){
        mediator.on('message', function(e, params){
            alert(params.name);
        });
    }
}

var App = {
    init: function(){
        obj1.start();
        obj2.start();
        mediator.trigger('go');
        obj2.respond();
        obj1.send();
    }
}

App.init();

*/