用于改变用户输入值的事件监听器

Question

我正在创建一个用于测量转换的练习项目。 我正在尝试拥有一个事件侦听器，因此只要输入值发生变化，转换就会发生变化。 我不断收到错误消息“answer.addEventListener 不是函数”，我不知道如何修复它。 我该如何解决这个问题？

<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"
}

Answer 1

你做的一切都是对的，只是问题是你没有把 eventListener 放到输入的值中，而是把它放到了输入中。 下面的代码将起作用。

 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>

用于改变用户输入值的事件监听器

问题描述

1 个解决方案

解决方案1
1 2022-03-06 16:20:28

用于改变用户输入值的事件监听器

问题描述

1 个解决方案

解决方案1 1 2022-03-06 16:20:28

解决方案1
1 2022-03-06 16:20:28