Javascript 输入事件侦听器坏了?

Javascript input event listener broken?

作为课程的一部分,我正在开发一个单位转换应用程序,我对只工作一次的“输入”事件侦听器感到困惑。当我打开页面或刷新页面时,当我第一次输入我的输入元素时,该函数正常工作并显示初始值。后续输入正确显示,但结果保持不变,有时甚至停留在 0 需要再次刷新。

这是我的代码:

////// HTML Elements
const inputEl = document.getElementById("input-el")
const Lresult = document.getElementById("lresult")
const Vresult = document.getElementById("vresult")
const Mresult = document.getElementById("mresult")

////// Ratios for conversion
const metricLratio = 3.28084
const metricVratio = 0.264172
const metricMratio = 2.20462
const imperialLratio = 0.3048
const imperialVratio = 4.54609
const imperialMratio = 0.453592

////// Getting conversion results first so I can use the toFixed method
let metricLresult = inputEl.value * metricLratio
let metricVresult = inputEl.value * metricVratio
let metricMresult = inputEl.value * metricMratio
let imperialLresult = inputEl.value * imperialLratio
let imperialVresult = inputEl.value * imperialVratio
let imperialMresult = inputEl.value * imperialMratio

////// Functions
inputEl.addEventListener("input", function() {
    
    Lresult.textContent = `${inputEl.value} meters = ${metricLresult.toFixed(3)} feet | ${inputEl.value} feet = ${imperialLresult.toFixed(3)} meters`

    Vresult.textContent = `${inputEl.value} liters = ${metricVresult.toFixed(3)} gallons | ${inputEl.value} gallons = ${imperialVresult.toFixed(3)} liters`

    Mresult.textContent = `${inputEl.value} kilos = ${metricMresult.toFixed(3)} pounds | ${inputEl.value} pounds = ${imperialMresult.toFixed(3)} kilos`
})
<!DOCTYPE html>
<html>
    <head>
        <title>Unit Conversion Tool</title>
        <link rel="stylesheet" href="styles.css">
        <script src="index.js" defer></script>
    </head>
    <body>
        <div class="container">
            <div id="top-side">
                <h3>Metric/Imperial unit conversion</h3>
                <input id="input-el" inputmode="numeric" placeholder="Enter value here" min="0">
            </div>
            <div id="bot-side">
                <div>
                    <h4>Length (Meter/Feet)</h4>
                    <p id="lresult">
                        0 meters = 0.000 feet | 0 feet = 0.000 meters
                    </p>
                </div>
                <div>
                    <h4>Volume (Liters/Gallons)</h4>
                    <p id="vresult">
                        0 liters = 0.000 gallons | 0 gallons = 0.000 liters
                    </p>
                </div>
                <div>
                    <h4>Mass (Kilograms/Pounds</h4>
                    <p id="mresult">
                        0 kilos = 0.000 pounds | 0 pounds = 0.000 kilos
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>

正如我提到的,随后对该字段的输入会正确更新 inputEl.value 并且它显示正常,但我希望显示的各种结果保持不变。

我是不是很笨?

您只计算输入元素一开始就有的 value 那样的值 metricLresult 一次!在您的事件侦听器中,您永远不会重新计算它们。如果您将所有这些 let 移动到函数中,以便它们每次 运行 ,它就会起作用:

////// Functions
inputEl.addEventListener("input", function() {
    
    ////// Getting conversion results first so I can use the toFixed method
    let metricLresult = inputEl.value * metricLratio
    let metricVresult = inputEl.value * metricVratio
    let metricMresult = inputEl.value * metricMratio
    let imperialLresult = inputEl.value * imperialLratio
    let imperialVresult = inputEl.value * imperialVratio
    let imperialMresult = inputEl.value * imperialMratio

    Lresult.textContent = `${inputEl.value} meters = ${metricLresult.toFixed(3)} feet | ${inputEl.value} feet = ${imperialLresult.toFixed(3)} meters`

    Vresult.textContent = `${inputEl.value} liters = ${metricVresult.toFixed(3)} gallons | ${inputEl.value} gallons = ${imperialVresult.toFixed(3)} liters`

    Mresult.textContent = `${inputEl.value} kilos = ${metricMresult.toFixed(3)} pounds | ${inputEl.value} pounds = ${imperialMresult.toFixed(3)} kilos`
})

作为运行可用代码段的工作代码:

////// HTML Elements
const inputEl = document.getElementById("input-el")
const Lresult = document.getElementById("lresult")
const Vresult = document.getElementById("vresult")
const Mresult = document.getElementById("mresult")

////// Ratios for conversion
const metricLratio = 3.28084
const metricVratio = 0.264172
const metricMratio = 2.20462
const imperialLratio = 0.3048
const imperialVratio = 4.54609
const imperialMratio = 0.453592

////// Functions
inputEl.addEventListener("input", function() {
    
    ////// Getting conversion results first so I can use the toFixed method
    let metricLresult = inputEl.value * metricLratio
    let metricVresult = inputEl.value * metricVratio
    let metricMresult = inputEl.value * metricMratio
    let imperialLresult = inputEl.value * imperialLratio
    let imperialVresult = inputEl.value * imperialVratio
    let imperialMresult = inputEl.value * imperialMratio

    Lresult.textContent = `${inputEl.value} meters = ${metricLresult.toFixed(3)} feet | ${inputEl.value} feet = ${imperialLresult.toFixed(3)} meters`

    Vresult.textContent = `${inputEl.value} liters = ${metricVresult.toFixed(3)} gallons | ${inputEl.value} gallons = ${imperialVresult.toFixed(3)} liters`

    Mresult.textContent = `${inputEl.value} kilos = ${metricMresult.toFixed(3)} pounds | ${inputEl.value} pounds = ${imperialMresult.toFixed(3)} kilos`
})
<!DOCTYPE html>
<html>
    <head>
        <title>Unit Conversion Tool</title>
        <link rel="stylesheet" href="styles.css">
        <script src="index.js" defer></script>
    </head>
    <body>
        <div class="container">
            <div id="top-side">
                <h3>Metric/Imperial unit conversion</h3>
                <input id="input-el" inputmode="numeric" placeholder="Enter value here" min="0">
            </div>
            <div id="bot-side">
                <div>
                    <h4>Length (Meter/Feet)</h4>
                    <p id="lresult">
                        0 meters = 0.000 feet | 0 feet = 0.000 meters
                    </p>
                </div>
                <div>
                    <h4>Volume (Liters/Gallons)</h4>
                    <p id="vresult">
                        0 liters = 0.000 gallons | 0 gallons = 0.000 liters
                    </p>
                </div>
                <div>
                    <h4>Mass (Kilograms/Pounds</h4>
                    <p id="mresult">
                        0 kilos = 0.000 pounds | 0 pounds = 0.000 kilos
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>