¿Cómo puedo agregar un valor a un tipo de entrada?
Actualmente estoy trabajando en un convertidor de metro a kilómetro, a milla,...
Creé diferentes tipos de entrada en mi código HTML y tomé el valor de ellos en JS, que funcionó completamente bien, y evité que la página se recargara después de hacer clic en Enviar. Ahora quiero reasignar el nuevo valor calculado (kilómetro.valor = metro / 1000), pero esto no funciona.
Funciona completamente bien, cuando coloco un archivo console.log después del medidor variable y el primer kilómetro variable. Registra el número correcto: la reasignación simplemente no funciona.
JavaScript:
const calculateMeter = () => { let meter = document.getElementById("meter").value; let kilometer = document.getElementById("kilometer").value; kilometer.value = meter / 1000; }HTML:
<form id="calculator" onsubmit="calculateMeter(); return false"> <label for="kilometer">Kilometer:</label> <input type="number" id="kilometer"><br> <label for="meter">Meter:</label> <input type="number" id="meter"><br>¿Quiso decir algo como eso?
let meterInp = document.getElementById("meter"); let kilometerInp = document.getElementById("kilometer"); meterInp.addEventListener("change", ()=>{ kilometerInp.value = (+meterInp.value)/1000; }); kilometerInp.addEventListener("change", ()=>{ meterInp.value = (+kilometerInp.value)*1000; }); <form id="calculator" onsubmit="calculateMeter(); return false"> <label for="kilometer">Kilometer:</label> <input type="number" id="kilometer" step="0.00001"><br> <label for="meter">Meter:</label> <input type="number" step="0.01" id="meter"><br> </form>El (+) convierte una cadena en un número. por ejemplo (+meterInp.value)/1000
value de <input> siempre es una cadena, pero en el caso de tipos de entrada numéricos, como type="number" o type="range" , puede obtener el número directamente usando valueAsNumber :
const calculateMeter = () => { let kilometer = document.getElementById("kilometer").valueAsNumber; document.getElementById("meter").value = kilometer * 1000; } const calculateKilometer = () => { let meter = document.getElementById("meter").valueAsNumber; document.getElementById("kilometer").value = meter / 1000; } <label for="kilometer">Kilometer:</label> <input type="number" id="kilometer" oninput="calculateMeter()"><br> <label for="meter">Meter:</label> <input type="number" id="meter" oninput="calculateKilometer()"><br>Deberías convertir metros a intiger
const calculateMeter = () => { let meter = document.getElementById("meter").value; let kilometer = document.getElementById("kilometer").value; kilometer.value = Number(meter) / 1000; }