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

Question

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.

score 1 · Answer 1 · answered Dec 07 '21 at 23:04

you have couple problems:

document.getElementById('shoeSize').value returns a string, you should use parseInt function to convert from string to an integer. And then handle the case when text is entered in textbox. parseInt will return NaN then. (You could also change input type to number to prevent this).
Your javascript is being ran when page is loaded i think, not when input is changed easiest way would be to add onchange attribute to your input.
I'm not too sure about this but switch statement looks wrong as well 14 >= 20 shouldn't work as far as i know.

Here is working jsfiddle demo: https://jsfiddle.net/cry9xzhb/13/

score 1 · Accepted Answer · answered Dec 07 '21 at 23:17

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().

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

2 Answers2