时间戳

首页 > 解决方案 > 如何将 HTML 输入字段数据记录到控制台？

javascript - 如何将 HTML 输入字段数据记录到控制台？

问题描述

这是我到目前为止所拥有的：

document.querySelector('.check').addEventListener('click', function() {
  console.log(document.querySelector('.height').value);
});
!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 rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC" </head>

  <body>
    <main>
      <h3>Enter your height in metres.</h3>
      <input type="number" class="height" />
      <h3>Enter your weight in kilograms.</h3>
      <input type="number" class="weight" />
      <div>
        <button class="btn class">Calculate my BMI!</button>
        <p id="bmi"></p>
      </div>
    </main>
  </body>

</html>

当我输入高度并单击按钮时，控制台中没有任何反应。基本上，我的目标是构建一个度量 BMI 计算器。作为第一步，我试图将用户输入的“高度”值记录到控制台。我真的不明白为什么这不起作用，我想我错过了一些东西。有人可以帮忙吗？

标签： javascripthtmlconsole.log

解决方案

您的代码在该行的控制台上引发错误：

document.querySelector('.check').addEventListener('click', function() {

因为querySelector('.check')调用找不到任何具有类的元素，check因此返回 null。要解决此问题，您可以check向按钮添加一个类：

document.querySelector('.check').addEventListener('click', function() {
  console.log(document.querySelector('.height').value);
});
<!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 rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC" </head>

  <body>
    <main>
      <h3>Enter your height in metres.</h3>
      <input type="number" class="height" />
      <h3>Enter your weight in kilograms.</h3>
      <input type="number" class="weight" />
      <div>
        <button class="check btn class">Calculate my BMI!</button>
        <p id="bmi"></p>
      </div>
    </main>
  </body>

</html>

推荐阅读