JavaScript - Генератор паролей (флажок) - PullRequest
Новая
       5

JavaScript - Генератор паролей (флажок)

0 голосов
/ 27 мая 2020

Работаю над заданием про генератор паролей. Вот мои HTML и JavaScript. Когда я устанавливаю флажок для числа и символа, результат возвращает пароль, включающий «undefined». Я предполагаю, что проблема связана с моим условием if-else для статуса флажка. Я ожидал, что какой бы результат я ни щелкнул, в нем не будет буквы «undefined». Может ли кто-нибудь помочь мне с этой проблемой? Спасибо! 

const btn = document.querySelector(".btn")
function getChar(num, char) {
  if (document.querySelector("input[name=" + num + "]").checked) {
    return char
  }
}
btn.addEventListener("click", e => {


  if (!document.querySelector("input[name=en]").checked && !document.querySelector("input[name=num]").checked && !document.querySelector("input[name=sym]").checked) {
    return
  }

  let password = ""
  let alphabet = "abcdefghijklmnopqrstuvwxyz"
  let number = "0123456789"
  let symbol = "!@#$%^&*+="

  password += getChar("en", alphabet)
  password += getChar("num", number)
  password += getChar("sym", symbol)


  let result = ""
  for (let i = 0; i < 10; i++) {
    let num = Math.floor(Math.random() * password.length)
    result += password[num]
  }
  console.log(result)
  document.querySelector(".result").innerHTML = result
})
<div class="container">
    <div class="english">
      <label for="en">English letter</label>
      <input type="checkbox" name="en">
    </div>
    <div class="number">
      <label for="num">Number</label>
      <input type="checkbox" name="num">
    </div>
    <div class="symbol">
      <label for="sym">Symbol</label>
      <input type="checkbox" name="sym">
    </div>
    <button class="btn">Generate</button>
    <div class="result"></div>
 </div>

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Проблема заключалась в том, что функция getChar возвращает undefined, если флажок не установлен. Желаемый функционал достигается следующими модификациями: 

const btn = document.querySelector(".btn")

function getChar(num) {
  return document.querySelector("input[name=" + num + "]").checked
}

btn.addEventListener("click", e => {
  if (!document.querySelector("input[name=en]").checked && !document.querySelector("input[name=num]").checked && !document.querySelector("input[name=sym]").checked) {
    return
  }

  let password = ""
  let alphabet = "abcdefghijklmnopqrstuvwxyz"
  let number = "0123456789"
  let symbol = "!@#$%^&*+="

  if (getChar("en")) password += alphabet
  if (getChar("num")) password += number
  if (getChar("sym")) password += symbol


  let result = ""
  for (let i = 0; i < 10; i++) {
    let num = Math.floor(Math.random() * password.length)
    result += password[num]
  }
  console.log(result)
  document.querySelector(".result").innerHTML = result
})
<div class="container">
    <div class="english">
      <label for="en">English letter</label>
      <input type="checkbox" name="en">
    </div>
    <div class="number">
      <label for="num">Number</label>
      <input type="checkbox" name="num">
    </div>
    <div class="symbol">
      <label for="sym">Symbol</label>
      <input type="checkbox" name="sym">
    </div>
    <button class="btn">Generate</button>
    <div class="result"></div>
 </div>
0 голосов
/ 27 мая 2020

Когда флажок снят, его значение равно undefined.

Поскольку вы возвращаете значение каждый раз, когда вы добавляете новые символы в переменную пароля, вы добавляете «undefined». Просто добавьте оператор else, который возвращает пустую строку.

...