时间戳

首页 > 解决方案 > 如果语句在 Javascript 中无法正常工作

javascript - 如果语句在 Javascript 中无法正常工作

问题描述

我编写了一个程序，该程序应根据用户的年龄输入显示饮料图像或警报窗口。问题是，无论提交什么值，它都只执行语句的“if”部分。在执行之前没有检查任何其他条件。我尝试使用带有元素 ID 的 getElementById 代替 querySelector，但程序根本没有运行。我尝试了带有按钮标签的 querySelector 以及输入标签。那也没有用。

function strt() {
  let theButton = document.getElementById('aButton');
  theButton.addEventListener('click', verifyAge);
}

function verifyAge() {
  let patronAge = document.querySelector('age');
  let primaryImg = document.getElementById('mainImg');

  if (patronAge < 21) {
    primaryImg.src = 'images/cola.jpg';
  } else if (patronAge >= 21) {
    primaryImg.src = 'images/tallboy.jpg';
  } else if (patronAge <= 0) {
    alert('Please enter a valid number:');
  } else if (patronAge == NaN) {
    alert('That is not a valid number. Please try again.');
  }
}
window.addEventListener('load', strt);
<img src="images/bar&grill.png" alt="barandgrill" id="mainImg">
<br>
<form>
  <label for="age">Please enter your age:</label>
  <input type="text" id="age" required>
  <button id="aButton" type="button">Get Drinks</button>
</form>

标签： javascripthtml

解决方案

而不是这样写：

let patronAge = document.querySelector('age');

你应该写下以下内容：

let patronAge = parseInt(document.querySelector('#age').value);

您的方法存在一些问题。

  1. querySelector('age')寻找带有标签的元素age，这不存在。由于您正在使用querySelector您需要指定一个#符号来搜索一个 id。
  2. 您需要访问 HTMLElement 的值
  3. 您需要将值解析为数字

推荐阅读