JSFiddle - React, Tailwind, and code Playground

by dsbonev

HTML

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

JavaScript

/* radio check listener */

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;
    
    function logInfo(info) {
        if (!console || !console.log) return;
            
        console.log(info);
    }
    
    function logPrevious(element) {
        if (!element) return;
            
        var message = element.value + ' was unchecked';
        
        logInfo(message);
    }
    
    function logCurrent(element) {
        if (!element) return;
            
        var message = element.value + ' is checked';
        
        logInfo(message);
    }
    
    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;
        
        if (name !== 'myRadios') return;
            
        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);
        
        previousCheckedRadio = currentCheckedRadio;
    };
    
    return result;
})();

document.addEventListener('change', changeHandler, false);