0

Este es el código, no soy programador ni nada por el estilo, lo hice siguiendo tutoriales para tener un conversor de tallas de tenis.

Al querer sumar, une los números. Ya intente con parseInt() pero no me ha funcionado, tal vez lo estoy colocando mal

Espero me puedan ayudar

<html>
<title>Conversor de tallas</title>
<body>
<style>
body {font-family: helvetica;}
h2   {color: #FE5708;}
p    {color: black;}
</style>

<h2>Conversor de tallas</h2>
<p>Selecciona tu talla en centimetros</p>

<select name="cm" id="input" oninput="Converter(this.value)" onchange="LengthConverter(this.value)">
    <option value="">Centímetros</option>
    <option value="22">22</option>
    <option value="22">22.5</option>
    <option value="23">23</option>
    <option value="23.5">23.5</option>
    <option value="24">24</option>
    <option value="24.5">24.5</option>
    <option value="25">25</option>
    <option value="25.5">25.5</option>
    <option value="26">26</option>
    <option value="26.5">26.5</option>
    <option value="27">27</option>
    <option value="27.5">27.5</option>
    <option value="28">28</option>
    <option value="28.5">28.5</option>
    <option value="29">29</option>
    <option value="29.5">29.5</option>
    <option value="30">30</option>
    <option value="30.5">30.5</option>
    <option value="31">31</option>
    <option value="31.5">31.5</option>
    <option value="32">32</option>
    <option value="32.5">32.5</option>
</select>


<p>US M <span id="outputMeters"></span></p>

<p>US W <span id="outputMeters2"></span></p>

<p>MEX <span id="outputMeters3"></span></p>

<p>EURO <span id="outputMeters4"></span></p>

<script>
function Converter(valNum) {
  document.getElementById("outputMeters").innerHTML=valNum-18;
  document.getElementById("outputMeters2").innerHTML=valNum-16;
  document.getElementById("outputMeters3").innerHTML=valNum-20;
  document.getElementById("outputMeters4").innerHTML=valNum+14;
  
}

</script>
  
</script>
</body>
</html>

2 respuestas 2

5

La propiedad value del select es un string. Necesitas convertirlo con parseInt o parseFloat para preservar los decimales. Eso es todo.

Por cierto, en la parte de onchange te quedó un nombre diferente se la función que estás usando. Tienes que cambiarlo:

onchange="Converter(this.value)"

Así queda:

function Converter(valNum) {
   valNum = parseInt(valNum)
   document.getElementById("outputMeters").innerHTML=valNum-18;
   document.getElementById("outputMeters2").innerHTML=valNum-16;
   document.getElementById("outputMeters3").innerHTML=valNum-20;
   document.getElementById("outputMeters4").innerHTML=valNum+14;
}
body {font-family: helvetica;}
h2   {color: #FE5708;}
p    {color: black;}
<h2>Conversor de tallas</h2>
<p>Selecciona tu talla en centimetros</p>

<select name="cm" id="input" oninput="Converter(this.value)" onchange="Converter(this.value)">
    <option value="">Centímetros</option>
    <option value="22">22</option>
    <option value="22">22.5</option>
    <option value="23">23</option>
    <option value="23.5">23.5</option>
    <option value="24">24</option>
    <option value="24.5">24.5</option>
    <option value="25">25</option>
    <option value="25.5">25.5</option>
    <option value="26">26</option>
    <option value="26.5">26.5</option>
    <option value="27">27</option>
    <option value="27.5">27.5</option>
    <option value="28">28</option>
    <option value="28.5">28.5</option>
    <option value="29">29</option>
    <option value="29.5">29.5</option>
    <option value="30">30</option>
    <option value="30.5">30.5</option>
    <option value="31">31</option>
    <option value="31.5">31.5</option>
    <option value="32">32</option>
    <option value="32.5">32.5</option>
</select>


<p>US M <span id="outputMeters"></span></p>

<p>US W <span id="outputMeters2"></span></p>

<p>MEX <span id="outputMeters3"></span></p>

<p>EURO <span id="outputMeters4"></span></p>

5
  • Muchas gracias! ya quedo resuelto Commented el 26 mar. 2023 a las 16:47
  • @VlogdeSneakers Recuerda aceptar la respuesta. Commented el 26 mar. 2023 a las 16:50
  • 1
    Lo único que le cambiaría a la respuesta es que en lugar de usar parseInt, usaría parseFloat ya que existen tallas con decimales.
    – DjCrazy
    Commented el 27 mar. 2023 a las 14:10
  • Muchas gracias! ya hice el cambio del parseFloat y es junto lo que necesita, hay alguna forma de que solo un numero (la talla en EURO) no tenga decimales? y se redondee hacia arriba? Commented el 27 mar. 2023 a las 15:43
  • @Vlog con Math.round o Math.ceil.
    – Mateo
    Commented el 27 mar. 2023 a las 15:50
4

El problema radica es que la función no sabe qué valor tiene tu variable valNum y, por otro lado, debes pasar dicho valor de string a number.

Justo asi:

valNum =   parseFloat(document.getElementById("input").value);

Aquí la respuesta en código:

function Converter(valNum) {
    valNum =   parseFloat(document.getElementById("input").value);

    document.getElementById("outputMeters").innerHTML= valNum-18;
    document.getElementById("outputMeters2").innerHTML=valNum-16;
    document.getElementById("outputMeters3").innerHTML=valNum-20;
    document.getElementById("outputMeters4").innerHTML=valNum+14;
    
  }
1
  • Muchas gracias! ya hice el cambio del parseFloat y es junto lo que necesita, hay alguna forma de que solo un numero (la talla en EURO) no tenga decimales? y se redondee hacia arriba? Commented el 27 mar. 2023 a las 15:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.