JSFiddle - React, Tailwind, and code Playground

by Alpesh Patel

HTML

<input type="text" name="text1" value="1"  onChange="javascript:fnName" onBlur="javascript:fnName" >
    <input type="text" name="text2" value="2" onChange="javascript:fnName" onBlur="javascript:fnName" >
    <input type="text" name="text3" value="3" onChange="javascript:fnName" onBlur="javascript:fnName" >
    <input type="text" name="text4" value="" onChange="javascript:fnName" onBlur="javascript:fnName" >
    <input type="text" name="text5" value="" onChange="javascript:fnName" onBlur="javascript:fnName" >
    <input type="text" name="text6" value="" onChange="javascript:fnName" onBlur="javascript:fnName" >
    <input type="text" name="text7" value="" onChange="javascript:fnName" onBlur="javascript:fnName" >

CSS

form {
    border: 2px solid black;
    margin: 10px;
    padding: 10px;
}

JavaScript

[].forEach.call(document.querySelectorAll("input"), function(input) {
  input.addEventListener("change", fnName);
  input.addEventListener("blur", fnName);
});