随机密码生成器 Javascript 不起作用

Question

我正在尝试创建一个随机密码生成器，它要求用户输入大小为 8-128 个字符，然后确认使用大写、小写、符号和/或数字。我正在尝试获取密码以在文本区域中生成和打印，我知道我遗漏了一些东西，但我不确定是什么。我为粗略的代码道歉。我才刚开始。

var plength = prompt("How many characters would you like your password to be?")

if (plength < 8 || plength > 128){
    alert("Length must be 8-128 characters")
}

if (plength >= 8 && plength <= 128){
var cuppercase = confirm("Would you like to use uppercase letters?")
var clowercase = confirm("Would you like to use lowercase letters?")
var cnumbers = confirm("would you like to use numbers?")
var csymbols = confirm("would you like to use special characters?")
}    

if (cuppercase != true && clowercase != true && cnumbers != true && csymbols != true){
    alert("You must select at least one character type!")
}

//DOM elements
const resultEl = document.getElementById('password');




document.getElementById('generate').addEventListener('click', () => {	
	const hasLower = clowercase.true;
	const hasUpper = cuppercase.true;
	const hasNumber = cnumbers.true;
	const hasSymbol = csymbols.true;
	resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});






const randomFunc = {
	lower: getRandomLower,
	upper: getRandomUpper,
	number: getRandomNumber,
	symbol: getRandomSymbol
}

document.getElementById('clipboard').addEventListener('click', () => {
	const textarea = document.createElement('textarea');
	const password = resultEl.innerText;
	
	if(!password) { return; }
	
	textarea.value = password;
	document.body.appendChild(textarea);
	textarea.select();
	document.execCommand('copy');
	textarea.remove();
	alert('Password copied to clipboard');
});


function generatePassword(lower, upper, number, symbol, length) {
	let generatedPassword = '';
    const typesCount = lower + upper + number + symbol;
	const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]);

 	// create a loop
     for(let i=0; i<length; i+=typesCount) {
		typesArr.forEach(type => {
			const funcName = Object.keys(type)[0];
			generatedPassword += randomFunc[funcName]();
		});
	}
	
	const finalPassword = generatedPassword.slice(0, length);
	
	return finalPassword;
}

// Generator functions

function getRandomLower() {
	return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
	return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
	return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
	const symbols = '!@#$%^&*(){}[]=<>/,.'
	return symbols[Math.floor(Math.random() * symbols.length)];
}

        <header>
          <h1 class="text-center" style= "margin-top: 20px;">Password Generator</h1>
        </header>
        
        <div class="card shadow-sm p-3 mb-5 bg-white rounded" style="max-width: 60%; margin: 40px auto;">
                <div class="card-body">
                  <h2 class="card-title">Generate a Password</h2>
                  <textarea 
                  style= "width: 100%; text-align:center; resize:none; border: dashed 2px lightgrey; margin:30px auto; padding: 10px auto; min-height: 100px;" 
    
                  readonly
                  id="password"
                  placeholder="Your Secure Password"
                  aria-label="Generated Password"
                ></textarea>
               
        <button type="button" class="btn btn-danger" id= "generate" style= "float:left; border-radius:40px; padding-right: 30px; padding-left: 30px;">Generate Password</button>
        <button type="button" class="btn btn-light" id= "clipboard" style= "float:right;  border-radius:40px; padding-right: 30px; padding-left: 30px; background-color: silver; color:white">Copy to clipboard</button>
    </div>
    </div>

Answer 1

好的，我在您的代码中发现了两个问题

1. 在本节中，您没有从 JS 定位 generate id

   generate.addEventListener('click', () => {
   常量 hasLower = clowercase.true; 常量 hasUpper = cuppercase.true; 常量 hasNumber = cnumbers.true; 常量 hasSymbol = csymbols.true; resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length); });

所以您可以简单地将其转换为document.getElementById('generate').addEventListener(...)

clipboard 也是如此，所以如果你解决了这个问题，我认为你很高兴。

Answer 2

更新：

我一直在向这个问题提出类似的问题，所以我想我会写一些更简洁的代码让他们在这里看到：

var length = Number(prompt("How many characters would you like your password to be?"));
while (isNaN(length) || length < 8 || length > 128) length = Number(prompt("Length must be 8-128 characters. How many characters would you like your password to be?"));

var uppers = confirm("Would you like to use uppercase letters?");
var lowers = confirm("Would you like to use lowercase letters?");
var numbers = confirm("Would you like to use numbers?");
var symbols = confirm("Would you like to use special characters?");

while (!uppers && !lowers && !numbers && !symbols) {
  alert("You must select at least one character type!");
  uppers = confirm("Would you like to use uppercase letters?");
  lowers = confirm("Would you like to use lowercase letters?");
  numbers = confirm("Would you like to use numbers?");
  symbols = confirm("Would you like to use special characters?");
}

window.addEventListener('load', function() {
  generateNewPassword();
});

function generateNewPassword() {
  var password = "";

  var allowed = {};
  if (uppers) password += rando(allowed.uppers = "QWERTYUIOPASDFGHJKLZXCVBNM");
  if (lowers) password += rando(allowed.lowers = "qwertyuiopasdfghjklzxcvbnm");
  if (numbers) password += rando(allowed.numbers = "1234567890");
  if (symbols) password += rando(allowed.symbols = "!@#$%^&*(){}[]=<>/,.");

  for (var i = password.length; i < length; i++) password += rando(rando(allowed).value);

  document.getElementById("password").value = randoSequence(password).join("");
}

<script src="https://randojs.com/1.0.0.js"></script>
<input type="text" id="password"/>
<button onclick="generateNewPassword();">Generate new password</button>

我使用randojs.com 使随机性简单易读，就像我在最初回答这个问题时所做的那样。如果您需要对此进行解释，请访问该网站。只需添加以下内容：

<script src="https://randojs.com/1.0.0.js"></script>

在你的 head 标签中可以使用 randojs 函数。

---

旧答案：

您缺少一些分号。您应该等到页面加载后通过换行来访问元素：

window.addEventListener('load', function (){

});

您应该获取文本区域的值，而不是其内部文本。我还在开始时为提示/确认添加了循环，以强制用户重试，直到他们提供有效输入。除此之外，我只是稍微清理了格式。我使用randojs.com 使随机性更易于阅读。如果您需要对此进行解释，请访问该网站。我刚刚添加了这个：

<script src="https://randojs.com/1.0.0.js"></script>

在你的 head 标签中能够使用 randojs 函数。如果您有任何问题，请告诉我。

window.addEventListener('load', function() {
  var plength = prompt("How many characters would you like your password to be?");

  while (plength < 8 || plength > 128) {
    plength = prompt("Length must be 8-128 characters. How many characters would you like your password to be?");
  }

  var cuppercase = confirm("Would you like to use uppercase letters?");
  var clowercase = confirm("Would you like to use lowercase letters?");
  var cnumbers = confirm("would you like to use numbers?");
  var csymbols = confirm("would you like to use special characters?");

  while (!(cuppercase || clowercase || cnumbers || csymbols)) {
    alert("You must select at least one character type!");

    cuppercase = confirm("Would you like to use uppercase letters?");
    clowercase = confirm("Would you like to use lowercase letters?");
    cnumbers = confirm("would you like to use numbers?");
    csymbols = confirm("would you like to use special characters?");
  }

  //DOM elements
  const resultEl = document.getElementById('password');

  document.getElementById('generate').addEventListener('click', () => {
    resultEl.value = generatePassword(clowercase, cuppercase, cnumbers, csymbols, plength);
  });

  document.getElementById('clipboard').addEventListener('click', () => {
    const textarea = document.createElement('textarea');
    const password = resultEl.value;

    if (!password) {
      return;
    }

    textarea.value = password;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    textarea.remove();
    alert('Password copied to clipboard');
  });
});


const randomFunc = {
  lower: getRandomLower,
  upper: getRandomUpper,
  number: getRandomNumber,
  symbol: getRandomSymbol
};

function generatePassword(lower, upper, number, symbol, length) {
  let generatedPassword = '';
  const typesCount = lower + upper + number + symbol;
  const typesArr = [{
    lower
  }, {
    upper
  }, {
    number
  }, {
    symbol
  }].filter(item => Object.values(item)[0]);

  // create a loop
  for (let i = 0; i < length; i += typesCount) {
    typesArr.forEach(type => {
      const funcName = Object.keys(type)[0];
      generatedPassword += randomFunc[funcName]();
    });
  }

  const finalPassword = generatedPassword.slice(0, length);

  return finalPassword;
}

// Generator functions
function getRandomLower() {
  return rando("qwertyuiopasdfghjklzxcvbnm")
}

function getRandomUpper() {
  return rando("QWERTYUIOPASDFGHJKLZXCVBNM");
}

function getRandomNumber() {
  return rando(9);
}

function getRandomSymbol() {
  return rando('!@#$%^&*(){}[]=<>/,.');
}

<html>
  <head>
    <script src="https://randojs.com/1.0.0.js"></script>
  </head>
  <body>
    <header>
      <h1 class="text-center" style="margin-top: 20px;">Password Generator</h1>
    </header>
    <div class="card shadow-sm p-3 mb-5 bg-white rounded" style="max-width: 60%; margin: 40px auto;">
      <div class="card-body">
        <h2 class="card-title">Generate a Password</h2>
        <textarea style="width: 100%; text-align:center; resize:none; border: dashed 2px lightgrey; margin:30px auto; padding: 10px auto; min-height: 100px;" readonly id="password" placeholder="Your Secure Password" aria-label="Generated Password"></textarea>
        <button type="button" class="btn btn-danger" id="generate" style="float:left; border-radius:40px; padding-right: 30px; padding-left: 30px;">Generate Password</button>
        <button type="button" class="btn btn-light" id="clipboard" style="float:right;  border-radius:40px; padding-right: 30px; padding-left: 30px; background-color: silver; color:white">Copy to clipboard</button>
      </div>
    </div>
  </body>
</html>

Answer 3

作为变体

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
        <script type="text/javascript">
            var uppers = "ABCDEFHGIJKLMNOPQRSTUVWXYZ";
            var lowers = "abcdefghijklmnopqrstuvwxyz";
            var digits = "0123456789";
            var specials = "!@#$%^&*()_-=+[]{}";
            var minlen = 3;
            var maxlen = 128;
            function genPwd() {
                var dict = '';
                var pwd = '';
                var len = document.getElementById("stlength").value;

                if ( document.getElementById("ckuppers").checked ) {
                    dict += uppers;
                }
                if ( document.getElementById("cklowers").checked ) {
                    dict += lowers;
                }
                if ( document.getElementById("ckdigits").checked ) {
                    dict += digits;
                }
                if ( document.getElementById("ckspecials").checked ) {
                    dict+= specials;
                }

                if ( dict == '' ) {
                    pwd = 'You must select some character type(s)';
                }
                else {
                    for ( var i = 0; i < len; ++i ) {
                        pwd += dict[Math.floor(Math.random() * dict.length)];
                    }
                }

                document.getElementById("txtpassword").value = pwd;
            }
        </script>
    </head>
    <body>
        <h1>Password Generator</h1>
        <form>
            <table cellspacing="10">
                <tr>
                    <td>
                        <input type="checkbox" id="ckuppers">&nbsp;Uppercase
                    </td>
                    <td>
                        <input type="checkbox" id="cklowers">&nbsp;Lowercase
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" id="ckdigits">&nbsp;Digits
                    </td>
                    <td>
                        <input type="checkbox" id="ckspecials">&nbsp;Specials
                    </td>
                </tr>
                <tr>
                    <td>
                        Length&nbsp;<select id="stlength">
                            <script type="text/javascript">
                                for ( var i = minlen; i <= maxlen; ++i ) {
                                    document.writeln('<option>' + i + '</option>');
                                }
                            </script>
                        </select>
                    </td>
                    <td>
                        <input type="button" value="Generate" onclick="genPwd();">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        Password:&nbsp;<input type="text" size="64" id="txtpassword">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>