JSFiddle - React, Tailwind, and code Playground

by jdarville

HTML

<div data-role"content"
<center><table>
<tr><td><label>Previous</label></td><td><input type="text" id="prevbw" name="prevbw" value="" placeholder="BW" /></td><td><input type="text" id="prevcolor" name="prevcolor" value="" placeholder="color"/></td></tr>
           <tr><td><label>Current</label></td><td><input type="text" id="currentbw" name="currentbw" value="" placeholder="BW" /></td><td><input type="text" id="currentcolor" name="currentcolor" value="" placeholder="color" /></td></tr>
           <tr><td><label>Copies</label></td><td><input type="text" id="copiesbw" name="copiesbw" value="" placeholder="BW" /></td><td><input type="text" id="copiescolor" name="copiescolor" value="" placeholder="color" /></td></tr>
    </table></center>
</div>

JavaScript

/* store elements */
    var currentbw = document.getElementById('currentbw'),
        prevbw = document.getElementById('prevbw'),
        copiesbw = document.getElementById('copiesbw');
   
    function calculate_temp() {
        copiesbw.value = parseInt(currentbw.value,10) - parseInt(prevbw.value,10);
    }
   
    /* unobtrusive onblur */
    currentbw.onblur = calculate_temp;
    prevbw.onblur = calculate_temp;
    copiesbw.onblur = calculate_temp;