如何解决如何将 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。