如何将 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 计算器。作为第一步，我试图将用户输入的“高度”值记录到控制台。我真的不明白为什么这不起作用，我想我错过了一些东西。有人可以帮忙吗？

解决方法

你的代码在控制台上抛出一个错误就行了：

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>

您应该在按钮中提供与代码中使用的相同的类，否则最好在我们处理事件时提供 id。

document.querySelector('#check').addEventListener('click',function() {
   console.log(document.querySelector('.height').value);
});
//Replace you button code with below 
<button id="check" class="btn class">Calculate my BMI!</button>

或

document.querySelector('.check').addEventListener('click',function() {
   console.log(document.querySelector('.height').value);
});
//Replace you button code with below 
<button id="check" class="btn class check">Calculate my BMI!</button>

伙计，这只是一个小问题。

document.querySelector('.check')

但是，没有带有 check 类的元素，因此 EventListener 甚至没有附加到按钮上。这将解决它。

<button class="btn class check">Calculate my BMI!</button>

console.log html javascript