JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<label> Value1: <input id="value1" type="text" value="1000"></label><br>
<label> Value2: <input id="value2" type="text" value="2000"></label><br>
<label> Value3: <input id="value3" type="text" value="150"></label><br>
<label> Value4: <input id="value4" type="text" value="4000"></label><br>
<label> Value5: <input id="value5" type="text" value="5000"></label><br>
<label> Answer1: <input id="answer1" type="text" readonly></label><br>
<label> Answer2: <input id="answer2" type="text" readonly></label><br>
<label> Answer3: <input id="answer3" type="text" readonly></label><br>
<button onclick="addNumbers()">Calc</button>

JavaScript

function addNumbers() {
    var val1 = Number(document.getElementById("value1").value);
    var val2 = Number(document.getElementById("value2").value);
    var val3 = Number(document.getElementById("value3").value);
    var val4 = Number(document.getElementById("value4").value);
    var val5 = Number(document.getElementById("value5").value);
    var val6 = 100;
    
    var ansD1 = document.getElementById("answer1");
    ansD1.value = (val1 * val2)*(val4/val6);
    
    var ansD2 = document.getElementById("answer2");
    ansD2.value = (val1 * val3)*(val5/val6);
    
    var ansD3 = document.getElementById("answer3");
    ansD3.value = ansD1.value - ansD2.value;
}