innerHTML не добавляет данные на страницу

let myFormR = document.querySelector(".myFormR");
let myFormD = document.querySelector(".myFormD");
let result = document.getElementById("resRad");

function calcRad(e) {
  e.preventDefault();
  let x = 2 * Math.PI * document.querySelector(".form-calcR").value;
  result.innerHTML = x;
  // alert(x);
}

function calcDiam() {
  let z = Math.PI * document.querySelector(".form-calcD").value;
  resRad.innerText = z;
}

let radOcr = myFormR.addEventListener("submit", calcRad);
let diamOcr = myFormR.addEventListener("submit", calcDiam);

<div class="calc container text-center">
  Калькулятор полезных действий
  <br />
  <br />
  <div>Длина окружности</div>
  <form class="myFormR">
    <input class="form-control form-calcR" type="text" placeholder="По радиусу" aria-label="default input example" />
  </form>
  <form class="myFormD">
    <input class="form-control form-calcD" type="text" placeholder="По диаметру" aria-label="default input example" />
  </form>
  <div>Длина окружности равна</div>
  <span id="resRad"></span>
</div>