我刚开始在 Scrimba 中学习 JavaScript，并且有一个练习部分可以进行单位转换，但我已经做了静态转换，然后我挑战自己添加用户输入，但我只是精疲力尽我现在很困惑
这是我的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div class="unit">
<h2 id="heading">Metric/Imperial Unit Converstion</h2>
<!-- <h2 id="numToConvert"> 0 </h2> -->
<input type="number" value="num" id="inputNum" min="0" onchange="unitConvert()">
</div>
</main>
<section>
<div class="main-results">
<div class="conversion-results">
<p>Length (Meter/Feet)
<p id="meterFeet">0 meters = 0.000 feet | 0 feet = 0.000 meters</p>
</div>
<div class="conversion-results">
<p>Volumes (Liters/Gallons)
<p id="litersGallons">0 liters = 0.000 gallons | 0 gallons = 0.000 liters</p>
</div>
<div class="conversion-results">
<p>Mass (Kilograns/Pounds)
<p id="kiloPounds">0 kilos = 0.000 pounds | 0 pounds = 0.000 kilos</p>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
这是我的 JavaScript 代码：
const unit = document.getElementById("inputNum").value;
function unitConvert() {
const meterToFeet = (unit * 3.28084).toFixed(3)
const feetToMeter = (unit * 0.3048).toFixed(3)
const litersToGallons = (unit * 0.264172).toFixed(3)
const GallonsToLiters = (unit * 3.785412).toFixed(3)
const kilogramsToPounds = (unit * 2.2).toFixed(3)
const poundsToKilograms = (unit / 2.2).toFixed(3)
//Meter to Feet/Vice Versa
document.getElementById("meterFeet").textContent = unit +" meters = "+ meterToFeet +" feet | "+unit+" feet = "+feetToMeter+" meters"
//Liters to Gallons/Vice Versa
document.getElementById("litersGallons").textContent = unit +" liters = "+ litersToGallons +" gallons | "+unit+" gallons = "+GallonsToLiters+" liters"
//Kilo to Pounds/Vice Versa
document.getElementById("kiloPounds").textContent = unit +" kilos = "+ kilogramsToPounds +" pounds | "+unit+" pounds = "+poundsToKilograms+" kilos"
}
你可以试试这个代码我希望这是你要求的
function unitConvert() {
const unit = document.getElementById("inputNum").value;
const meterToFeet = (unit * 3.28084).toFixed(3)
const feetToMeter = (unit * 0.3048).toFixed(3)
const litersToGallons = (unit * 0.264172).toFixed(3)
const GallonsToLiters = (unit * 3.785412).toFixed(3)
const kilogramsToPounds = (unit * 2.2).toFixed(3)
const poundsToKilograms = (unit / 2.2).toFixed(3)
//Meter to Feet/Vice Versa
document.getElementById("meterFeet").textContent = unit +" meters = "+ meterToFeet +" feet | "+unit+" feet = "+feetToMeter+" meters"
//Liters to Gallons/Vice Versa
document.getElementById("litersGallons").textContent = unit +" liters = "+ litersToGallons +" gallons | "+unit+" gallons = "+GallonsToLiters+" liters"
//Kilo to Pounds/Vice Versa
document.getElementById("kiloPounds").textContent = unit +" kilos = "+ kilogramsToPounds +" pounds | "+unit+" pounds = "+poundsToKilograms+" kilos"
}
const inputField = document.querySelector('#inputNum');
inputField .addEventListener('input', function () {
unitConvert()
});body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #fcbe24;
background-color: #18222d;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="unit">
<h2 id="heading">Metric/Imperial Unit Converstion</h2>
<!-- <h2 id="numToConvert"> 0 </h2> -->
<input type="number" value="num" id="inputNum" min="0" onchange="unitConvert()">
</div>
</main>
<section>
<div class="main-results">
<div class="conversion-results">
<p>Length (Meter/Feet)
<p id="meterFeet">0 meters = 0.000 feet | 0 feet = 0.000 meters</p>
</div>
<div class="conversion-results">
<p>Volumes (Liters/Gallons)
<p id="litersGallons">0 liters = 0.000 gallons | 0 gallons = 0.000 liters</p>
</div>
<div class="conversion-results">
<p>Mass (Kilograns/Pounds)
<p id="kiloPounds">0 kilos = 0.000 pounds | 0 pounds = 0.000 kilos</p>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句