const myFunction = function() {
let fah;
fah = document.getElementById('fah').value;
let celcius;
celcius = ((fah - 32) * 5/9);
document.getElementById('cel').value = celcius;
};
<body>
<main>
<h1 class="header">Fahrenhiet to celcius</h1>
<div class="wrapper">
<form class="form">
<div class="fah">
<label for="fah" class="fahrenhiet" id="fah">°F</label>
<input type="text" id="fah" class="input-fah" value="">
</div>
<div class="span">
<span class="equals"> = </span>
</div>
<div class="cel">
<input type="text" id="cel" class="input-cel" value="">
<label for="cel" class="celcius">°C</label>
</div>
<div class="bttn-group">
<button class="bttn bttn-sumbit" type="" onclick="myFunction(); event.preventDefault();">Submit</button>
<input class="bttn bttn-reset" type="reset" value="Reset">
</div>
</form>
</div>
</main>
<script src="script.js"></script>
</body>
一周后我又回到了这个代码,它之前运行得很好。现在,每次运行它时,我都会突然将 NaN 作为输出。我已经尝试了所有我能想到的甚至使用 parseInt() 的方法,但是在玩弄之后我意识到我的 fah 变量并没有被视为一个数字。我尝试删除 document.getElementById('fah').value;并使用了一个随机数,它似乎有效。我不知所措。我还在学习 javascript,所以我确定这是我还没有学到的东西。
答案 0 :(得分:3)
您的 HTML 中有重复的 ID,该 ID 无效并导致您的代码选择标签的 value
而不是输入字段。
您还应该 parseInt
用户输入以确保它是一个数字。
const myFunction = function() {
let fah;
fah = parseInt(document.getElementById('fah').value);
// CHANGE ---^
let celcius;
celcius = ((fah - 32) * 5/9);
document.getElementById('cel').value = celcius;
};
<body>
<main>
<h1 class="header">Fahrenhiet to celcius</h1>
<div class="wrapper">
<form class="form">
<div class="fah">
<label for="fah" class="fahrenhiet" id="fah-label">°F</label>
<!-- CHANGE ---------------------------------------^ -->
<input type="text" id="fah" class="input-fah" value="">
</div>
<div class="span">
<span class="equals"> = </span>
</div>
<div class="cel">
<input type="text" id="cel" class="input-cel" value="">
<label for="cel" class="celcius">°C</label>
</div>
<div class="bttn-group">
<button class="bttn bttn-sumbit" type="" onclick="myFunction(); event.preventDefault();">Submit</button>
<input class="bttn bttn-reset" type="reset" value="Reset">
</div>
</form>
</div>
</main>
<script src="script.js"></script>
</body>