JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<select id="a" class="foo">
   <option value="1">1</option>
  <option value="2">2</option>
</select>
<select id="b" class="foo">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<input id="totall" type="text" />

JavaScript

Element.implement('toNumber', function(){
  return this.value -0;
})

window.addEvent('domready', function () {
  
  if (typeof jQuery != 'undefined') {
    jQuery.noConflict();
  }
  
  var total = $('totall'),
      a = $('a'),
      b = $('b')
  
    function calculate() {
      total.value = a.toNumber() + b.toNumber()
    };


    total.set('readonly', true).set('disabled', true)

    /*$('a').addEvent('change', calculate);
    $('b').addEvent('change', calculate);
    $('c').addEvent('change', calculate);
    $('d').addEvent('change', calculate);
    $('e').addEvent('change', calculate);
    $('f').addEvent('change', calculate);
    $('g').addEvent('change', calculate);
    $('h').addEvent('change', calculate);
    $('i').addEvent('change', calculate);
    $('l').addEvent('change', calculate);
    $('m').addEvent('change', calculate);*/
    
    $$('.foo').addEvent('change', calculate);
  });