JSFiddle - React, Tailwind, and code Playground

HTML

X<input id="box1" type="text" oninput="calculate()" />
 Y<input id="box2" type="text" oninput="calculate()" />
   
  
<br>
<br>
    
<input id="box3" name="color" type="radio" value="White"/><label>White</label>

<input id="box4" name="color" type="radio" value="Black"/><label>Black</label>
			
<input id="box5" name="color" type="radio" value="Grey"/><label>Grey</label>
    
<input id="result">

JavaScript

function calculate() 
//If radiobutton with ID box3 is checked do this mybox1*mybox2+5
{
		var myBox1 = document.getElementById('box1').value;	
		var myBox2 = document.getElementById('box2').value;
		var result = document.getElementById('result');	
		var myResult = myBox1 * myBox2 + 5 ;
		result.value = myResult;
      }

//If radiobutton with ID box4 is checked do this mybox1*mybox2+10
{
		var myBox1 = document.getElementById('box1').value;	
		var myBox2 = document.getElementById('box2').value;
		var result = document.getElementById('result');	
		var myResult = myBox1 * myBox2 + 10 ;
		result.value = myResult;
      }

//If radiobutton with ID box3 is checked do this mybox1*mybox2+15
{
		var myBox1 = document.getElementById('box1').value;	
		var myBox2 = document.getElementById('box2').value;
		var result = document.getElementById('result');	
		var myResult = myBox1 * myBox2 + 15 ;
		result.value = myResult;
      }