JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<label><input type="radio" name="r" data-number="2" value="Radio 1"> Radio 1</label>
<label><input type="radio" name="r" data-number="4" value="Radio 2"> Radio 2</label>
<label><input type="radio" name="r" data-number="8" value="Radio 3"> Radio 3</label>
<br><br>
<input type="text" placeholder="Enter number">
<br><br>
<div class="result">Result</div>
</form>

CSS

*{
  box-sizing: border-box;
}

body{
  padding: 2rem;
}
input[type=text]{
  width: 100%;
  height: 50px;
  padding: 5px 20px;
}

JavaScript

'use strict';

var form = document.querySelector('form');
var radios = document.querySelectorAll('input[type=radio]');
var input = document.querySelector('input[type=text]');
var result = document.querySelector('.result');
var radiosValue;

function calcForm(){
  for (var i = 0; i < radios.length; i++) {
      radios[i].addEventListener('change', function() {
          radiosValue = result.innerHTML =  this.dataset.number;
      });
  }

  var inputValue = parseFloat(input.value, 10);
  
  // здесь скорее всего не правильное условие
  if(isNaN(inputValue) === true || isNaN(radiosValue) === true){
  	return result;
  }
  else{
  	result.innerHTML = inputValue * radiosValue;
  }
  
}
form.addEventListener('change', calcForm);