Estoy creando un sitio web y me gustaría crear una herramienta usando JavaScript para elegir el tamaño de patineta de alguien según el tamaño de sus zapatos. Este es el código que estoy usando:
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 importa lo que escriba en el cuadro de texto, siempre hay un "?" que aparece en mi sitio web. ¿Qué puedo hacer/cambiar para arreglar esto? Lo que quiero que suceda es que si alguien escribe, por ejemplo, "10" en el cuadro de texto, se debe imprimir "8.25". También agradecería cualquier otro consejo para mejorar mi código.
tienes problemas de pareja:
document.getElementById('shoeSize').value devuelve una cadena, debe usar la función parseInt para convertir una cadena a un número entero. Y luego maneje el caso cuando se ingrese texto en el cuadro de texto. parseInt devolverá NaN entonces. (También puede cambiar el tipo de entrada a número para evitar esto).
Su javascript se ejecuta cuando se carga la página, creo, no cuando se cambia la entrada. La forma más fácil sería agregar el atributo onchange a su entrada.
No estoy muy seguro de esto, pero la declaración de cambio también parece incorrecta 14 >= 20 no debería funcionar hasta donde yo sé.
Aquí está funcionando la demostración de jsfiddle: https://jsfiddle.net/cry9xzhb/13/
Prueba esto:
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 para mostrar el resultado. Esto es mejor que writeDocument() .