I am creating a practice project for measurement conversions. I am trying to have an event listener so whenever the input value is changed, the conversions change. I keep getting an error "answer.addEventListener is not a function" and I cannot figure out how to fix it. How can I fix that problem?
<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"
}
You did everything right👍, just the problem was that you dont put eventListener to the value of an input, u put it to the input. The below code will work.
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>