JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<select id="oddNumbers">
    <option value="">Select an Odd number</option>
</select>
<select id="evenNumbers">
    <option value="">Select an Even number</option>
</select>
<div><br /><span id="nbr"></span>

CSS

.invalid {
    color : red;
}
.valid {
    color : green;
}

JavaScript

var oddNumbers = document.getElementById("oddNumbers");
var evenNumbers = document.getElementById("evenNumbers");
var nbr = document.getElementById("nbr");

for (var i = 0; i <= 100; i++) {
    var opt = document.createElement('option');
    opt.setAttribute('value', i);
    var textNode = document.createTextNode(i);
    opt.appendChild(textNode);

    if (i % 2 == 0) {
        evenNumbers.appendChild(opt);
    } else {
        oddNumbers.appendChild(opt);
    }
}

function showVal(val) {
    if (val == "") {
        nbr.setAttribute('class', 'invalid');
        nbr.innerHTML = "No value selected.";
    } else {
        nbr.setAttribute('class', 'valid');
        nbr.innerHTML = "value: " + val;
    }
}

oddNumbers.addEventListener('change', function() {
    showVal(this.value);
});
evenNumbers.addEventListener('change', function() {
    showVal(this.value);
});