时间戳

首页 > 解决方案 > 如何根据我的 html 输入创建 javascript if 语句？

javascript - 如何根据我的 html 输入创建 javascript if 语句？

问题描述

我是 JavaScript 新手。我正在尝试制作一个激光标签游戏以与我的朋友分享。但是，我希望它像Kahoot It一样，我可以在其中输入游戏 PIN 码以将您带到正确的游戏。但是，我不知道如何告诉我的 javascript 我想参加哪个游戏。这是我的代码：

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: black;
}

.logo {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
}

.codeinput {
  width: 20%;
  size: 30%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.codeinput:focus {
  outline: none;
}

.enterbutton {
  border: none;
  background-color: #018D94;
  padding: 1% 4%;
  border-radius: 5%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.enterbutton:hover {
  background-color: #036266;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Laser Tag</title>
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <img src="img/logo.png" class="logo" alt="Laser Tag">
  <input type="text" name="" value="" placeholder="Game PIN" class="codeinput" id="codeinput">
  <button type="button" name="button" class="enterbutton" onclick="enterfunc">ENTER</button>
</body>
<script src="js/index.js" charset="utf-8"></script>
<script type="text/javascript">
  var codeinput = document.getElementById('codeinput').value;

  function enterfunc() {
    if (codeinput == '2147') {
      alert('Great! This works!');
    } else {
      alert('Hmm...something in your code is not right');
    }

  }
</script>

</html>

标签： javascripthtml

解决方案

你只需要var codeinput = document.getElementById('codeinput').value;像这样进入你的函数：

function enterfunc() {

  var codeinput = document.getElementById('codeinput').value;

  if (codeinput == '2147') {
    alert('Great! This works!');
  } else {
    alert('Hmm...something in your code is not right');
  }

}

这样，总是读取当前输入。

您还必须在 HTML 中正确调用该函数：

<button type="button" name="button" class="enterbutton" onclick="enterfunc()">ENTER</button>

由于enterfunc()是一个函数，因此您必须使用按钮标签内的括号。

推荐阅读