Changing HTML text based on a value entered into an input box

I am creating a website and would like to make a tool using JavaScript to choose someone’s skateboard size depending on their shoe size. This is the code I am using:

const shoeSize = document.getElementById('shoeSize').value
let boardSize = ''
switch (shoeSize) {
  case 0 <= 7: 
    boardSize = '7.75'
  break;
  case 8,9: 
    boardSize = '8'
  break;
  case 10,11: 
    boardSize = '8.25'
  break;
  case 12,13: 
    boardSize = '8.38'
  break;
  case 14 >= 20: 
    boardSize = '8.5'
  break;
  default:
    boardSize = '?'
  document.write(boardSize)
}

<p>
      Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5. <br> <br>
      If your shoe size is: <input id='shoeSize' type="text" class="shoe">. The best board size for you would be:
</p>

No matter what I type into the text box there is always a “?” that shows up on my website. What can I do/ change to fix this. What I want to happen is if someone types for example “10” into the text box, “8.25” should be printed. I would also appreciate any other tips to improve my code.

Answer

Try this:

const shoeSizeInput = document.getElementById('shoeSize')
const shoeSizeResult = document.getElementById('resultSize') // Get reference for the element where you want to display result

// Add event listener which will fire when input is changing 
shoeSizeInput.addEventListener('input', (event) => {
  const shoeSize = parseInt(event.target.value) // Get input value and parse to number
  let boardSize = '?'

  switch (true) {
    case 0 <= shoeSize && shoeSize <= 7:
      boardSize = '7.75'
      break;
    case shoeSize === 8 || shoeSize === 9:
      boardSize = '8'
      break;
    case shoeSize === 10 || shoeSize === 11:
      boardSize = '8.25'
      break;
    case shoeSize === 12 || shoeSize === 13:
      boardSize = '8.38'
      break;
    case 14 <= shoeSize && shoeSize <= 20:
      boardSize = '8.5'
      break;
  }
  shoeSizeResult.textContent = boardSize // Set text of result element to board Size
})

<p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
<label>If your shoe size is:</label><input id='shoeSize' type="number" class="shoe">
<p id="resultSize"></p>

What I have changed:

• Added an event listener. You checked the input value instantly when the page is loading. Therefore it always was empty.
• Changed the switch statement. You can read more about that here: Switch on ranges of integers in JavaScript
• Added a p tag to display result. This is better than writeDocument().