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.
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/
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>p tag to display result. This is better than writeDocument().