JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<button id="roll" onclick="Calc()">Button</button>
<p>ValueCalcGiveTitle
    <p>Enter first value:
        <input type="text" id='Value1' size="3" />
        <br/>Second value:
        <input type="text" id='Value2' size="3" />
        <br/>Third value:
        <input type="text" id='Value3' size="3" />
        <br/>Answer:
        <input type="text" id='Answer' size="3" disabled='disabled' />
    </p>
</p>

JavaScript

function Calc(){
	  var inputs = document.querySelectorAll('input[id*=Value]');//Select all inputs that have "Value" in the id
      var answer=0;
      [].forEach.call(inputs, function(input) {//Iterate over the input list
          if(!answer){//Set answer to the first input value 
              answer = input.value;
          }else{
          	if(input.value){//Only multiply if value is truthy 
                answer = input.value * answer;
          	}
   		 }
      }); 
      document.getElementById('Answer').value = answer;
}
window.Calc = Calc;