问题描述
我使用 HTML、Bootstrap 和 vanilla JavaScript 构建了一个温度转换器。用户选中以下选项之一的单选按钮：
- 华氏度到摄氏度。
- 华氏到开尔文。
- 摄氏度到华氏度。
- 摄氏度到开尔文。
- 开尔文到摄氏度。
- 开尔文到华氏度。
然后用户在此菜单下方的输入框中输入一个数字并按下“计算”按钮。这一切都放在一个窗体中，该窗体在计算按钮上有一个事件侦听器。当按下按钮时，事件侦听器会触发一个函数，该函数将用户输入的图形转换为选定的单位。如果用户未能勾选单选按钮和/或未能输入图形，则会触发另一个函数，该函数会创建一个带有错误消息的 div 并将其插入到页面中。最后，表单底部的重置按钮链接到一个函数，该函数在单击时重新加载页面。
对于任何给定的图形，表单可以显示六个输出之一，具体取决于用户勾选的单选按钮。假设用户输入 32，这些是预期结果：
- 华氏到摄氏 = 期望为 0。
- 华氏到开尔文 = 期望 273.1。
- 摄氏度到华氏度 = 期望 89.6
- 摄氏度到开尔文 = 期望 305.1
- 开尔文到摄氏度 = 期望 -241.1
- 开尔文到华氏度 = 期望 -402.1
该应用程序适用于上述每种可能的结果除了我用粗体表示的两种结果。当我尝试将摄氏度转换为开尔文或将开尔文转换为摄氏度时，我总是收到以下错误消息：
Uncaught TypeError: x.toFixed is not a function at HTMLFormElement.calculate
这是 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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body class="bg-primary">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Temperature Converter</h1>
<form id="temperatureForm">
<div class="form-group">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="fahrenheitToCelsiusRadioButton">
<label class="form-check-label" for="flexRadioDefault1">Fahrenheit to Celsius?</label>
</div>
<div class="form-group">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="fahrenheitToKelvinRadioButton">
<label class="form-check-label" for="flexRadioDefault1">Fahrenheit to Kelvin? </label>
</div>
<div class="form-group">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="celsiusToFahrenheiTradioButton">
<label class="form-check-label" for="flexRadioDefault1">Celsius to Fahrenheit?</label>
</div>
<div class="form-group">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="celsiusToKelvinRadioButton">
<label class="form-check-label" for="flexRadioDefault1">Celsius to Kelvin?</label>
</div>
<div class="form-group">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="kelvinToCelsiusRadioButton">
<label class="form-check-label" for="flexRadioDefault1">Kelvin to Celsius?</label>
</div>
<div class="form-group">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="kelvinToFahrenheiTradioButton">
<label class="form-check-label" for="flexRadioDefault1">Kelvin to Fahrenheit?</label>
</div>
<div class="form-group">
<div class="input-group mb-3 mt-3">
<span class="input-group-text" id="basic-addon1">Enter figure</span>
<input type="number" class="form-control" id="degreesToBeConverted"
aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<input type="submit" value="Calculate" class="btn btn-success col-6 mt-3">
</div>
</form>
<div id="results">
<h5 class="pt-4">Results</h5>
<div class="form-group">
<div class="input-group mb-3 mt-3">
<span class="input-group-text" id="nothingImportant">Result</span>
<input type="number" class="form-control" id="resultField"
aria-label="Username" aria-describedby="basic-addon1" disabled>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" value="Reset" id="resetButton" onclick="reloadPage()" class="btn btn-warning col-3 mt-3">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
这里是 JavaScript：
const form = document.getElementById('temperatureForm').addEventListener('submit',calculate)
// User input field
const degreesToBeConverted = document.getElementById('degreesToBeConverted');
// The six radio buttons
const fahrenheitToCelsiusRadioButton = document.getElementById('fahrenheitToCelsiusRadioButton')
const fahrenheitToKelvinRadioButton = document.getElementById('fahrenheitToKelvinRadioButton')
const celsiusToFahrenheiTradioButton = document.getElementById('celsiusToFahrenheiTradioButton')
const celsiusToKelvinRadioButton = document.getElementById('celsiusToKelvinRadioButton')
const kelvinToCelsiusRadioButton = document.getElementById('kelvinToCelsiusRadioButton')
const kelvinToFahrenheiTradioButton = document.getElementById('kelvinToFahrenheiTradioButton')
// Reset button
const resetButton = document.getElementById('resetButton');
function calculate(e) {
e.preventDefault();
let resultField = document.getElementById('resultField'); // results output here
let valueOfdegreesToBeConvertedField = degreesToBeConverted.value.length
if(fahrenheitToCelsiusRadioButton.checked == true) {
let x = (degreesToBeConverted.value - 32) * .5556;
resultField.value = x.toFixed(1);
} else if(fahrenheitToKelvinRadioButton.checked == true){
let x = (degreesToBeConverted.value - 32) * .5556 + 273.15;
resultField.value = x.toFixed(1);
}
else if(celsiusToFahrenheiTradioButton.checked == true){
let x = (degreesToBeConverted.value * 1.8) + 32;
resultField.value = x.toFixed(1);
} else if(celsiusToKelvinRadioButton.checked == true){ // Uncaught TypeError: x.toFixed is not a function at HTMLFormElement.calculate
let x = degreesToBeConverted.value + 273.15;
resultField.value = x.toFixed(1);
}
else if(kelvinToCelsiusRadioButton.checked == true){ // Uncaught TypeError: x.toFixed is not a function at HTMLFormElement.calculate
let x = degreesToBeConverted.value - 273.15;
resultField.value = x.toFixed(1);
} else if(kelvinToFahrenheiTradioButton.checked == true){
let x = ((degreesToBeConverted.value - 273.15) * 9 / 5) + 32;
resultField.value = x.toFixed(1);
}
else if (fahrenheitToCelsiusRadioButton.checked == false && celsiusToFahrenheiTradioButton.checked == false) {
showError('Please tick a button')
}
if(valueOfdegreesToBeConvertedField === 0) {
resultField.value = '';
showError('Please type a number in the Box')
} // Checks if input field is empty & displays error message if so.
}
function showError(error) {
// Create a Div
const errorDiv = document.createElement('div');
// Get Elements
const card = document.querySelector('.card');
const heading = document.querySelector('.heading');
// Add class
errorDiv.className = 'alert alert-danger';
// Create Text Node & Append to Div
errorDiv.appendChild(document.createTextNode(error));
// Insert error above heading
card.insertBefore(errorDiv,heading); // This means 'insert errorDiv before heading'
// Clear error after 3 seconds
setTimeout(clearError,3000);
}
// Clear error
function clearError() {
document.querySelector('.alert').remove();
}
function reloadPage(){
location.reload();
}
在我看来，这件事的特别之处在于我使用 .toFixed() 方法将六个计算中的每一个都返回到小数点后一位。它对其中四个完美适用，但对两个无效，但据我所见，确实抛出错误的代码段与错误代码段之间的代码没有有意义的区别没有。
这是我已经尝试过的：
- 我已尝试从抛出错误的两个代码段中删除
.toFixed()方法。这消除了错误，但会产生新的问题。对于摄氏度到开尔文的计算，删除.toFixed()会导致用户的数字连接到计算中使用的数字之一。澄清一下，将摄氏度转换为华氏度的过程非常简单；您只需将摄氏数字加上 273.15。这意味着如果用户输入 32，程序应该输出 305.1。相反，它连接两个数字并输出 32273.15。
此外，如果我从第二个有问题的计算（开尔文到摄氏度）中删除 .toFixed() ，则计算有效，但它会将数字保留十几个小数位（但仅当有十几个小数位要给出时，这很常见），这不是我想要的。
如果有人能解释为什么发生此错误，我将不胜感激。当然，任何建议的修复都非常受欢迎。
非常感谢
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）