switch doesn't evaluate expression

Question

In this example I am trying to create a simple report page.It takes 3 values as input, but switch statement doesn't work the way I thought. It goes straight to default statement. Something simple I haven't noticed? Here's the relevant code:

const subject = document.querySelector(".subjects");
const nameValue = document.querySelector(".input-name");
const score = document.querySelector(".score");
const dataInput = document.querySelector(".data-input");
let text;
// Assign grades function
const grades = function(grade) {
  switch (grade) {
    case 70:
      text = "A";
      break;
    case 60:
      text = "B";
      break;
    case 50:
      text = "C";
      break;
    case 45:
      text = "D";
      break;
    default:
      text = "Enter valid score";
  }
};
document.querySelector("#submit").addEventListener("click", function(e) {
  e.preventDefault();
  subjectValue = subject.options[subject.selectedIndex].text;
  grades(score.value);
  const html = `<table class="table">
    <tr class="table-row">
      <td>${subjectValue}</td>
      <td>${nameValue.value}</td>
      <td>${text}</td>
    </tr>
  </table>`;
  dataInput.insertAdjacentHTML("afterbegin", html);
});

<main class="container">
  <section class="input d-inline-block w-50">
    <h1 class="heading w-100">Enter your grades</h1>
    <form class="row g-3 m-2 mb-5">
      <div class="mb-6 d-flex p-2">
        <label for="selection" class="heading form-label">Enter subject:</label>
        <select class="form-select w-75 mb-5 subjects" aria-label="Disabled select example" id="selection">
          <option class="option" value="">Select subject</option>
          <option class="option" value="maths">Maths</option>
          <option class="option" value="chemistry">Chemistry</option>
          <option class="option" value="biology">Biology</option>
        </select>
      </div>
      <div class="mb-6 d-flex p-2">
         <label for="exampleFormControlInput1" class="heading form-label">Enter your name:</label>
        <input type="text" class="form-control w-75 input-name" id="exampleFormControlInput1" placeholder="John Smith" />
        </div>
      <div class="mb-6 d-flex p-2">
        <label for="customRange2" class="heading form-label mb-5 d-block">Enter your score:</label>
        <input type="number" class="score form-control w-75 mb-5" value="50" />
      </div>
      <button type="submit" id="submit" class="btn btn-primary w-50">Submit</button>
    </form>
  </section>
  <section class="report d-inline-block w-50">
    <h1 class="heading w-100">Class report</h1>
    <div class="data-input mb-6 w-100"></div>
  </section>
</main>