Блог

Главная - Вопросы по программированию - Я создал поле с пин-кодом, даже когда я набираю правильный пин-код, он говорит неправильно

Я создал поле с пин-кодом, даже когда я набираю правильный пин-код, он говорит неправильно

#javascript #html #css

Вопрос:

Я создал проект Pin-кода, в котором пользователь должен ввести pin-код, а затем я должен проверить его, чтобы сообщить пользователю, правильно это или нет. Когда я набираю неправильный ответ, он говорит «неправильно«, что и ожидалось, но когда я набираю правильный pin-код, он снова говорит «неправильно«, чего не ожидалось. Поэтому, пожалуйста, помогите мне найти ошибку и дайте мне несколько советов.

HTML

 let pinInput = form.box.value;
let pass = "1234";
let pass2 = 1234;
let attempts = 5;
function submit_func() {
  if (attempts >= 1) {
    if (pinInput == pass || pinInput == pass2) {
      document.getElementById("result").innerHTML = "Right";
    } else {
      attempts -= 1;
      document.getElementById(
        "result"
      ).innerHTML = `Wrong, Attempts left ${attempts}`;
    }
  } else {
    document.getElementById("result").innerHTML = "You are out of attempts";
  }
} 
 * {
  padding: 0;
  margin: 0;
  border: none;
  font-size: 1.2rem;
}
body {
  height: 100vh;
  width: 100vw;
}
main {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}
#box {
  display: block;
  grid-column: 1/4;
  background-color: rgb(49, 49, 49);
  color: #fff;
}
form {
  height: 60%;
  width: 25%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 1fr 1fr 1fr 1fr;
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  background-color: transparent;
}
.btn {
  background-color: rgb(49, 49, 49);
  color: #fff;
}
.btn:hover {
  background-color: #000;
}
.reset {
  grid-column: 3/4;
  grid-row: 5/6;
}
.ok_btn {
  grid-column: 1/2;
  grid-row: 5/6;
}
#result {
  position: absolute;
  top: 0;
} 
 <!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" />
    <title>Pin Box</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <form name="form" id="form">
        <input type="text" name="box" id="box" autocomplete="off" />

        <input
          type="button"
          class="btn"
          value="1"
          onclick="form.box.value  = '1'"
        />
        <input
          type="button"
          class="btn"
          value="2"
          onclick="form.box.value  = '2'"
        />
        <input
          type="button"
          class="btn"
          value="3"
          onclick="form.box.value  = '3'"
        />
        <input
          type="button"
          class="btn"
          value="4"
          onclick="form.box.value  = '4'"
        />
        <input
          type="button"
          class="btn"
          value="5"
          onclick="form.box.value  = '5'"
        />
        <input
          type="button"
          class="btn"
          value="6"
          onclick="form.box.value  = '6'"
        />
        <input
          type="button"
          class="btn"
          value="7"
          onclick="form.box.value  = '7'"
        />
        <input
          type="button"
          class="btn"
          value="8"
          onclick="form.box.value  = '8'"
        />
        <input
          type="button"
          class="btn"
          value="9"
          onclick="form.box.value  = '9'"
        />
        <input
          type="button"
          class="btn"
          value="0"
          onclick="form.box.value  = '0'"
        />
        <input
          type="button"
          class="btn ok_btn"
          value="OK"
          onclick="submit_func()"
        />
        <button type="reset" class="btn reset">Clear</button>
      </form>
      <p id="result"></p>
    </main>
    <script src="script.js"></script>
  </body>
</html>

Я изучаю JS

Ответ №1:

Похоже, что вы не обновляете pinInput до его текущего значения при его тестировании, поэтому он всегда имеет исходное (нулевое) значение.

Итак, измените свой JS на:

 let pinInput = form.box.value;
let pass = "1234";
let pass2 = 1234;
let attempts = 5;
function submit_func() {
  
  pinInput = form.box.value;
  if (attempts >= 1) {
    if (pinInput == pass || pinInput == pass2) {
      document.getElementById("result").innerHTML = "Right";
    } else {
      attempts -= 1;
      document.getElementById(
        "result"
      ).innerHTML = `Wrong, Attempts left ${attempts}`;
    }
  } else {
    document.getElementById("result").innerHTML = "You are out of attempts";
  }
}

Сказав это, я хотел бы предостеречь вас. Это небезопасный способ проверки pin-кода. Пользователь может легко зайти в свои инструменты разработки и посмотреть, как проверяется его ввод и вводится правильный ответ.

Чтобы обеспечить безопасность, вам нужно будет выполнить проверку в недоступном для пользователя месте на бэкэнде.

Ответ №2:

pinInput всегда будет пустой строкой, потому что вы задаете значение переменной перед вызовом функции отправки. let pinInput = form.box.value; Вместо этого в функции должна быть первая строка, чтобы она на самом деле забирала значение в поле после того, как вы добавили несколько чисел.

 let pass = "1234";
let pass2 = 1234;
let attempts = 5;

function submit_func() {
  let pinInput = form.box.value;
  if (attempts >= 1) {
    if (pinInput == pass || pinInput == pass2) {
      document.getElementById("result").innerHTML = "Right";
    } else {
      attempts -= 1;
      document.getElementById(
        "result"
      ).innerHTML = `Wrong, Attempts left ${attempts}`;
    }
  } else {
    document.getElementById("result").innerHTML = "You are out of attempts";
  }
} 
 * {
  padding: 0;
  margin: 0;
  border: none;
  font-size: 1.2rem;
}

body {
  height: 100vh;
  width: 100vw;
}

main {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

#box {
  display: block;
  grid-column: 1/4;
  background-color: rgb(49, 49, 49);
  color: #fff;
}

form {
  height: 60%;
  width: 25%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 1fr 1fr 1fr 1fr;
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  background-color: transparent;
}

.btn {
  background-color: rgb(49, 49, 49);
  color: #fff;
}

.btn:hover {
  background-color: #000;
}

.reset {
  grid-column: 3/4;
  grid-row: 5/6;
}

.ok_btn {
  grid-column: 1/2;
  grid-row: 5/6;
}

#result {
  position: absolute;
  top: 0;
} 
 <main>
  <form name="form" id="form">
    <input type="text" name="box" id="box" autocomplete="off" />
    <input type="button" class="btn" value="1" onclick="form.box.value  = '1'" />
    <input type="button" class="btn" value="2" onclick="form.box.value  = '2'" />
    <input type="button" class="btn" value="3" onclick="form.box.value  = '3'" />
    <input type="button" class="btn" value="4" onclick="form.box.value  = '4'" />
    <input type="button" class="btn" value="5" onclick="form.box.value  = '5'" />
    <input type="button" class="btn" value="6" onclick="form.box.value  = '6'" />
    <input type="button" class="btn" value="7" onclick="form.box.value  = '7'" />
    <input type="button" class="btn" value="8" onclick="form.box.value  = '8'" />
    <input type="button" class="btn" value="9" onclick="form.box.value  = '9'" />
    <input type="button" class="btn" value="0" onclick="form.box.value  = '0'" />
    <input type="button" class="btn ok_btn" value="OK" onclick="submit_func()" />
    <button type="reset" class="btn reset">Clear</button>
  </form>
  <p id="result"></p>
</main>
Метки: , ,