JSFiddle - React, Tailwind, and code Playground

by Mirza Brunjadze

HTML

<form action="#">
  <label>No of Questions - Easy level</label>
  <input type="number" class="txtCal" id="input_item" name="level1_no_of_questions" placeholder="No of Questions - Easy level" Required/><br />

  <label>No of Questions - Intermediate level</label>
  <input type="number" name="level2_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Intermediate level" Required/><br />

  <label>No of Questions - Difficult level</label>
  <input type="number" name="level3_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Difficult level" Required/><br/>

  <label>Total No of Questions</label>
  <input type="number" name="total_no_of_questions" class="totCal" value="0" id="input_item" placeholder="Total No of Questions" min="20" max="20"/><br />

  <input type="submit">
</form>

JavaScript

var totalNo = document.querySelector('[name="total_no_of_questions"]');
var inputSources = [
	document.querySelector('[name="level1_no_of_questions"]'),
	document.querySelector('[name="level2_no_of_questions"]'),
	document.querySelector('[name="level3_no_of_questions"]'),
];

// Set event listeners
inputSources.forEach(function (input) {
	input.addEventListener('blur', findTotal);
});

function findTotal() {
    totalNo.value = inputSources.reduce(function (total, curr) {
	    var value = Number(curr.value);

      return total + (isNaN(value) ? 0 : value);
    }, 0);
}