Estoy tratando de recrear una tabla de medidas de prendas que he visto, pero en Javascript puro. Tengo problemas para averiguar cómo tomar el valor numérico en innerhtml y multiplicarlo/dividirlo por * 2.54. Además, me gustaría agregar "cm" o "in" al final del número para indicar el sistema de medida.
https://jsfiddle.net/kud8sj7w/5/
<div id="xs-sizes"> <li class="measurement" style="left: 15%; top: 33%;"> 63.5 </li><li class="measurement" style="left: 48%; top: 16%;"> 43.5 </li><li class="measurement" style="left: 48%; top: 79%;"> 50.5 </li><li class="measurement" style="left: 48%; top: 50%;"> 43 </li><li class="measurement" style="left: 83%; top: 62%;"> 64.5 </li> function convert() { var measurements = document.getElementsByClassName("measurement"); for(var i = 0; i < measurements.length; i++){ measurements[i].innerHTML = valNum * 2.54; } }Debe almacenar el estado actual para saber si necesita convertir o no. En su caso, inicialmente 'CM'
let cur_measurement = 'CM'; function convert() { let measurements = document.getElementsByClassName("measurement"); let CM = document.querySelector('input[value="CM"]'); let IN = document.querySelector('input[value="IN"]'); let ratio = 0; if(CM.checked && cur_measurement != 'CM'){ ratio = 2.54; cur_measurement = 'CM'; } else if (IN.checked && cur_measurement != 'IN' ){ ratio = 1/2.54; cur_measurement = 'IN'; } for (var i = 0; i < measurements.length; i++) { let cur_val = parseFloat(measurements[i].innerText); measurements[i].innerText = Math.round(cur_val * ratio * 10) / 10; } }Entonces, para measurements[i].innerHTML = valNum * 2.54; , valNum no está definido. Mire convert() no hay parámetros. Cuando se llama, se multiplica por valNum que no está undefined .
Piense en a qué debería equivaler valNum o en qué debería estar operando 2.54 . Espero que eso ayude. También para encadenar el cm/unit , puede simplemente concatenar pero obtener el resultado primero.