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