时间戳

首页 > 解决方案 > 我认为我的 if else if 条件不起作用。有人能帮我吗？

javascript - 我认为我的 if else if 条件不起作用。有人能帮我吗？

问题描述

嗯，我正在练习 JS，所以请原谅我的代码。我只是想要一些指导和提示来改进我的代码。

我为跑步者创建了类似注册表单的东西。条件是： - 早起的成年人（比赛人数应在 1000 人或以上）在上午 9:30 跑步 - 我在这里使用了 Math.floor(Math.random() * 1000)。- 迟到的成年人在上午 11:00 运行 - 青少年注册者在下午 12:30 运行（无论是否注册）。

为青年注册者和早期成人工作..但是当连续注册早鸟时..随机比赛编号将不起作用。

这是我的 JS：

let registeredEarly;
let registeredEarlyNot;
var userAge;
var userName;
const raceNumber = Math.floor(Math.random() * 1000);

function getValueName() {
  userName = document.getElementById('userName').value;
}

function getValueAge() {
  userAge = document.getElementById('userAge').value;

  if (userAge >= 18){
    document.getElementById('showWhenAbove18').style.display = "block";
  } else {
    document.getElementById('showWhenAbove18').style.display = "none";
  }
}

function earlyYes() {
  registeredEarly = document.getElementById('registeredEarlyYes').value;
}
function earlyNo() {
  registeredEarlyNot = document.getElementById('registeredEarlyNo').value;
}

function showResult() {

  if (registeredEarly === 'true' && userAge >= 18) {
    document.getElementById('yourResult').innerHTML = (`Hi, ${userName}! Your race number is ${raceNumber + 1000}. <br /><br /> Race will start at 9:30 AM.`);
  } else if (registeredEarlyNot === 'false' && userAge >= 18) {
    document.getElementById('yourResult').innerHTML = (`Hi, ${userName}! Your race number is ${raceNumber}.<br /><br /> Race will start at 11:00 AM.`);
  } else {
    document.getElementById('yourResult').innerHTML = (`Hi, ${userName}! Your race number is ${raceNumber}. <br /><br /> Race will start at 12:30 PM.`);
}

  document.getElementById("registerNow").reset();
  document.getElementById("showWhenAbove18").style.display = "none";
  return true;

};

document.querySelector("button").addEventListener("click", function(event) {
      showResult();
      event.preventDefault();
  }, false);
<!DOCTYPE html>
<html>
<head>
  <title>Runner Registration</title>
  </head>
  <body>
    <h1>Get your race number now!</h1>
    <h3 id="yourResult"></h3>

    <form id="registerNow" name="registerNow">

<label for="userName">Runner's Name</label><br />
<input type="text" id="userName" name="userName" placeholder="Enter your name" oninput="getValueName()"></input><br /><br />

<label for="userAge">Runner's age</label><br />
<input type="text" id="userAge" name="userAge" placeholder="Enter your age" oninput="getValueAge()"></input>
<br /><br />

<span id="showWhenAbove18" style="display: none;">
<label>Early Bird?</label>
<input type="radio" id="registeredEarlyYes" value="true" name="EarlyOrNot" onclick="earlyYes()">Yes
<input type="radio" id="registeredEarlyNo" value="false" name="EarlyOrNot" onclick="earlyNo()">No
<br /><br /></span>

<button type="submit" onclick="showResult()">Submit</button>

</form>
<br />
<p>Start time: <br /><br />
  Early adults (race number at or above 1000.) run at 9:30 am.<br />
  Late adults run at 11:00 am.<br />
  Youth registrants run at 12:30 pm (regardless of registration).<br /></p>

</body>

</html>

谢谢！

标签： javascript

解决方案

比赛号码不会更新，因为您只是第一次在代码中分配比赛号码。

submit也许您应该在单击按钮时分配/创建比赛编号

也不需要保留两个变量来检查是否提前注册。

同样input在 HTML 中是字符串，您需要使用将其转换为整数Number

let registeredEarly = false;
var userAge;
var userName;
let raceNumber;

function getValueName() {
  userName = document.getElementById('userName').value;
}

function getValueAge() {
  userAge = document.getElementById('userAge').value;

  if (Number(userAge) >= 18){
    document.getElementById('showWhenAbove18').style.display = "block";
  } else {
    document.getElementById('showWhenAbove18').style.display = "none";
  }
}

function earlyYes() {
  registeredEarly = true;
}
function earlyNo() {
  registeredEarly = false;
}

function showResult() {
  raceNumber = Math.floor(Math.random() * 1000);
  if (registeredEarly && Number(userAge) >= 18) {
    document.getElementById('yourResult').innerHTML = (`Hi, ${userName}! Your race number is ${raceNumber + 1000}. <br /><br /> Race will start at 9:30 AM.`);
  } else if (!registeredEarly && userAge >= 18) {
    document.getElementById('yourResult').innerHTML = (`Hi, ${userName}! Your race number is ${raceNumber}.<br /><br /> Race will start at 11:00 AM.`);
  } else {
    document.getElementById('yourResult').innerHTML = (`Hi, ${userName}! Your race number is ${raceNumber}. <br /><br /> Race will start at 12:30 PM.`);
}

  document.getElementById("registerNow").reset();
  document.getElementById("showWhenAbove18").style.display = "none";
  return true;

};

document.querySelector("button").addEventListener("click", function(event) {
      showResult();
      event.preventDefault();
      registeredEarly = false;
  }, false);
<!DOCTYPE html>
<html>
<head>
  <title>Runner Registration</title>
  </head>
  <body>
    <h1>Get your race number now!</h1>
    <h3 id="yourResult"></h3>

    <form id="registerNow" name="registerNow">

<label for="userName">Runner's Name</label><br />
<input type="text" id="userName" name="userName" placeholder="Enter your name" oninput="getValueName()"></input><br /><br />

<label for="userAge">Runner's age</label><br />
<input type="text" id="userAge" name="userAge" placeholder="Enter your age" oninput="getValueAge()"></input>
<br /><br />

<span id="showWhenAbove18" style="display: none;">
<label>Early Bird?</label>
<input type="radio" id="registeredEarlyYes" value="true" name="EarlyOrNot" onclick="earlyYes()">Yes
<input type="radio" id="registeredEarlyNo" value="false" name="EarlyOrNot" onclick="earlyNo()">No
<br /><br /></span>

<button type="submit" onclick="showResult()">Submit</button>

</form>
<br />
<p>Start time: <br /><br />
  Early adults (race number at or above 1000.) run at 9:30 am.<br />
  Late adults run at 11:00 am.<br />
  Youth registrants run at 12:30 pm (regardless of registration).<br /></p>

</body>

</html>

推荐阅读