Estoy creando un proyecto de práctica para conversiones de medidas. Estoy tratando de tener un detector de eventos para que cada vez que se cambie el valor de entrada, las conversiones cambien. Sigo recibiendo el error "answer.addEventListener no es una función" y no sé cómo solucionarlo. ¿Cómo puedo solucionar ese problema?
<html> <head> <link rel="stylesheet" href="index.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap" rel="stylesheet"> </head> <body> <div id="top"> <h1 id="header">Metric/Imperial Unit Conversion</h1> <input value="" id="convert" type="number" onchange="calculate()"> </div> <div id="body"> <h1 id="lengthmeas">Length (Meter/Feet)</h1> <h1 id="lengthcalc"></h1> <h1 id="volumemeas">Volume (Liters/Gallons)</h1> <h1 id="volumecalc"></h1> <h1 id="massmeas">Mass (Kilograms/Pounds)</h1> <h1 id="masscalc"></h1> </div> <script src="index.js"></script> </body> </html> let number = document.querySelector('input') let lengthcalc = document.getElementById("lengthcalc") let volumecalc = document.getElementById("volumecalc") let masscalc = document.getElementById("masscalc") let answer = number.value var change = new Event("change") answer.addEventListener('change', function() { calculate() }); function calculate() { let feettometers = answer * 3.218 feettometers = feettometers.toFixed(3) let meterstofeet = answer/3.218 meterstofeet = meterstofeet.toFixed(3); lengthcalc.textContent = answer + " meters = " + feettometers + " feet | " + answer + " feet = " + meterstofeet + " meters" let literstogallons = answer / 3.785 literstogallons = literstogallons.toFixed(3) let gallonstoliters = answer * 3.785 gallonstoliters = gallonstoliters.toFixed(3) volumecalc.textContent = answer + " liters = " + literstogallons + " gallons | " + answer + " gallons = " + gallonstoliters + " liters" let kilostopounds = answer * 2.205 kilostopounds = kilostopounds.toFixed(3) let poundstokilos = answer / 2.205 poundstokilos = poundstokilos.toFixed(3) masscalc.textContent = answer + " kilograms = " + kilostopounds + " pounds | " + answer + " pounds = " + poundstokilos + " kilograms" }Hiciste todo bien👍, solo el problema fue que no pones eventListener en el valor de una entrada, lo pones en la entrada. El siguiente código funcionará.
let number = document.querySelector('input') let lengthcalc = document.getElementById("lengthcalc") let volumecalc = document.getElementById("volumecalc") let masscalc = document.getElementById("masscalc") let answer = number.value var change = new Event("change") number.addEventListener('change', function() { answer = number.value calculate() }); function calculate() { let feettometers = answer * 3.218 feettometers = feettometers.toFixed(3) let meterstofeet = answer/3.218 meterstofeet = meterstofeet.toFixed(3); lengthcalc.textContent = answer + " meters = " + feettometers + " feet | " + answer + " feet = " + meterstofeet + " meters" let literstogallons = answer / 3.785 literstogallons = literstogallons.toFixed(3) let gallonstoliters = answer * 3.785 gallonstoliters = gallonstoliters.toFixed(3) volumecalc.textContent = answer + " liters = " + literstogallons + " gallons | " + answer + " gallons = " + gallonstoliters + " liters" let kilostopounds = answer * 2.205 kilostopounds = kilostopounds.toFixed(3) let poundstokilos = answer / 2.205 poundstokilos = poundstokilos.toFixed(3) masscalc.textContent = answer + " kilograms = " + kilostopounds + " pounds | " + answer + " pounds = " + poundstokilos + " kilograms" } <html> <head> <link rel="stylesheet" href="index.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap" rel="stylesheet"> </head> <body> <div id="top"> <h1 id="header">Metric/Imperial Unit Conversion</h1> <input value="" id="convert" type="number" onchange="calculate()"> </div> <div id="body"> <h1 id="lengthmeas">Length (Meter/Feet)</h1> <h1 id="lengthcalc"></h1> <h1 id="volumemeas">Volume (Liters/Gallons)</h1> <h1 id="volumecalc"></h1> <h1 id="massmeas">Mass (Kilograms/Pounds)</h1> <h1 id="masscalc"></h1> </div> <script src="index.js"></script> </body> </html>