我正在尝试制作公制/英制单位转换器，但我不确定为什么我的输入值未定义，而转换后的值显示为 Nan。我怎样才能解决这个问题？ 以下是我的 HTML 代码：
el="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="section-1">
<h1 id="heading">Metric/Imperial Unit Conversion</h1>
<input id="input-value"type="number" />
<br/>
<button id="convert-btn">Convert</button>
<br/>
<div class="conversions">
<!-- length -->
<div id="length-box">
<h3 id="length-text">Length(Meter/Feet)</h3>
<p id="length-value"></p>
</div>
<!-- volume -->
<div id="volume-box">
<h3 id="volume-text">Volume(Liters/Gallons)</h3>
<p id="volume-value"></p>
</div>
<!-- mass -->
<div id="mass-box">
<h3 id="mass-text">Mass(Kilograms/Pounds)</h3>
<p id="mass-value"> </p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JavaScript代码：
const convertBtn = document.getElementById("convert-btn")
let inputVal = document.getElementById("input-value")
let lengthValue = document.getElementById("length-value")
let volumeValue = document.getElementById("volume-value")
let massValue = document.getElementById("mass-value")
let isAlive = false
let feet = inputVal * 3.281
let theFeet = feet.toFixed(3)
let meters = inputVal / 3.281
let theMeters = meters.toFixed(3)
let liters = inputVal * 0.264
let theLiters = liters.toFixed(3)
let gallons = inputVal / 0.264
let theGallons = gallons.toFixed(3)
let kilos = inputVal * 2.204
let theKilos = kilos.toFixed(3)
let pounds = inputVal / 2.204
let thePounds = pounds.toFixed(3)
if (isAlive === false)
{
lengthValue.innerHTML = `0 meters= 0 feet |0 feet=0 meters`
volumeValue.innerHTML = `0 liters= 0 gallons | 0 gallons= 0 liters`
massValue.innerHTML = `0 kilos= 0 pounds | 0 pounds=0liters`
}
else if (isAlive === true)
{
converter()
}
convertBtn.addEventListener('click', function converter(inputVal)
{
inputVal = console.log(inputVal.value)
isAlive = true
lengthValue.textContent = `${inputVal} meters= ${theFeet} feet | ${inputVal} feet=${theMeters } meters`
volumeValue.innerHTML = `${inputVal} liters= ${theLiters} gallons | ${inputVal} gallons=${theGallons } liters`
massValue.innerHTML = `${inputVal} kilos= ${theKilos} pounds | ${inputVal} pounds=${thePounds } liters`
})
我试图将输入值保存到 localStorage ，但是当我安慰 inputVal 时，它给了我强输入 Val
我删除了之前的console.log，还需要DOM元素inputVal的值。最后我将 inputVal 作为函数的参数。 Javascript 代码解决方案：
const convertBtn= document.getElementById("convert-btn")
let inputVal= document.getElementById("input-value")
let lengthValue=document.getElementById("length-value")
let volumeValue= document.getElementById("volume-value")
let massValue= document.getElementById("mass-value")
let isAlive=false
let metersToFeet=3.281
let theMeters=metersToFeet.toFixed(3)
//VOLUME SECTION //////////////////////// //////////////////////////////////////////////////
let liters=0.264
let theLiters= liters.toFixed(3)
// MASS SECTION////////////////////////////////////////////////////////////////////////////
let kilos= 2.204
let theKilos= kilos.toFixed(3)
// ////////////////////////////////////////////////////////////////////////
if(isAlive===false){
lengthValue.innerHTML=`0 meters= 0 feet |0 feet=0 meters`
volumeValue.innerHTML=`0 liters= 0 gallons | 0 gallons= 0 liters`
massValue.innerHTML=`0 kilos= 0 pounds | 0 pounds=0liters`
}
else if(isAlive === true){
converter()
}
// ////////////////////////////////////////////////////////////////////////////////////////////////
// /DISPLAY RESULTS/////////////////////////////////////////////////////////////////////////////////
convertBtn.addEventListener('click',function converter(){
let input=inputVal.value
isAlive=true
lengthValue.textContent=`${input} meters= ${input * theMeters} feet | ${input} feet=${input/ theMeters} meters`
volumeValue.innerHTML=`${input} liters= ${input * theLiters} gallons | ${input} gallons=${input/theLiters} liters`
massValue.innerHTML=`${input} kilos= ${input * theKilos} pounds | ${input} pounds=${input/theKilos} liters`
})