Question

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">&#176F</label>
          <input type="text" id="fah" class="input-fah" value="">
        </div>
        <div class="span">
          <span class="equals"> &#61 </span>
        </div>
        <div class="cel">
          <input type="text" id="cel" class="input-cel" value="">
          <label for="cel" class="celcius">&#176C</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，所以我确定这是我还没有学到的东西。

Answer 1

您的 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">&#176F</label>
<!-- CHANGE ---------------------------------------^ -->
          <input type="text" id="fah" class="input-fah" value="">
        </div>
        <div class="span">
          <span class="equals"> &#61 </span>
        </div>
        <div class="cel">
          <input type="text" id="cel" class="input-cel" value="">
          <label for="cel" class="celcius">&#176C</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 作为返回输出时遇到问题

1 个答案: