<div class="widget">
  <label>501 <input id="501a"></label>
  <label>501 <input id="501b"></label>
  <label>501 <input id="501c"></label>
  <label>Crk <input id="Crk1"></label>
  <label>Crk <input id="Crk2"></label>
  <label>Crk <input id="Crk3"></label>
  <button>Calculate</button>
  <label>Rating <input id="rating" readonly></label>
</div>

.widget {
  display: flex;
  flex-direction: column;
}

.widget > button {
  align-self: flex-start;
}

document.querySelector(".widget > button").addEventListener("click", calculate);

inputs = document.querySelectorAll(".widget input");
inputs.forEach(element=>element.addEventListener("input", clear));

function calculate() {
  let Average501 = (IDv("501a") + IDv("501b") + IDv("501c")) / 3;
  let AverageCrk = (IDv("Crk1") + IDv("Crk2") + IDv("Crk3")) / 3;
        
  let result = (Average501 + 10 * AverageCrk).toFixed(2);
  if ( isNaN(result) ) result = "Error";  
  document.getElementById("rating").value = result;
}

function IDv(x) {
  return Number(document.getElementById(x).value);
}

function clear(){
  document.getElementById("rating").value = "";
}