JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<input type='checkbox' checked='checked' name='check1' value='yes' />
<label id='lblCheck'> Disconnected from check </label>
<br />

<input type='text' value='hello' /><label id='lblTxt'>Click here to set text</label>
<br />

<select id='sel' name='select1'>
    <option selected='selected' value='option1'>One</option>
    <option selected='selected' value='option2'>Two</option>
    <option selected='selected' value='option3'>Three</option>
</select>
<label id='lblSel'>Change options</label>

<br />

<div class='output'>Output:<br /><div>

JavaScript

var output = $$(".output")[0];
output.addEvent('click', function(ev) { this.empty(); });

var sel = $('sel');
var lblSel = $("lblSel");
var index = 1;
lblSel.addEvent('click', function(ev) {
    sel.set('value', 'option'+(index));
    index = (index % 3) + 1;
    //sel.fireEvent('change');
});
['change','propertychange','input','click'].each(function(event){
    sel.addEvent(event, function(ev) {
        output.appendText(event+" ");
    });        
});






var check = $$('input[type=checkbox]')[0];
var lblCheck = $("lblCheck");
lblCheck.addEvent('click', function(ev) {
    //check.checked = !check.checked;
    check.set('checked', !check.checked);
    //check.fireEvent('change');
});

['change','click','propertychange','input'].each(function(event) {
    check.addEvent(event, function(ev) {
        output.appendText(event+" "); 
    });
});






var txt = $$('input[type=text]')[0];
var lblTxt = $('lblTxt');
lblTxt.addEvent('click', function(ev) {
    txt.set('value', new Date());
    //txt.fireEvent('change');
});

['change','input','propertychange','value','setvalue'].each(function(event) {
    txt.addEvent(event, function(ev) {
        output.appendText(event+" ");
    });
});