再次运行 JavaScript 函数后需要帮助清除文本区域答案

【问题标题】：Need help clearing text area after JavaScript function is ran again再次运行 JavaScript 函数后需要帮助清除文本区域
【发布时间】：2023-04-05 15:49:01
【问题描述】：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Password Generator</title>
    <link rel="stylesheet" href="assets\css\style.css" />
         
  </head>
  <body>

    <div class="wrapper">

      <!-- || HEADER || -->

      <header>
        <h1>Password Generator</h1>
      </header>

      <!-- || CONTENT || -->

      <div class="card">

        <div class="card-header">
          <h2>Generate a Password</h2>
        </div>

        <div class="card-body">
          <textarea readonly id="password" placeholder="Your Secure Password" aria-label="Generated Password"></textarea>
        </div>

        <div class="card-footer">
          <button id="generate" class="btn">Generate Password</button>
          <button id="copy" class="btn-copy">Copy to Clipboard</button>
        </div>

      </div>

    </div>

    <!-- || JAVASCRIPT STYLE SHEET || -->
    
    <script src="assets\js\script.js"></script>

  </body>

</html>

---- || JavaScript || ----

// GenerateBtn
var generateBtn = document.querySelector("#generate");

// Define variables
var selectLowerCase;
var selectUpperCase;
var selectNumber;
var selectSpecial;

// Set variables  
var plength = 0;
var lowerCase = "abcdefghijklmnopqrstuvwxyz";
// Uppercase conversion
var upperCase = lowerCase.toUpperCase();
var numbers = "1234567890";
var specialCharacter = "!#$%&'()*+,-./:;?@][^_`{|}~'<=>";
var userPassword = "";
var passwordGroup = "";

// Function writes password to the #password input
function writePassword() {
  var password = generatePassword();
  var passwordText = document.querySelector("#password");
  passwordText.value = password;
}

// Clicking btn runs funtion
generateBtn.addEventListener("click", writePassword);

// Request length of the password
var plength = parseInt(prompt("Welcome to Password Generator 2020. To begin, please enter a length of your password from 8-128.",""));

// Require number
while (isNaN(plength)) {
var plength = parseInt(prompt("This is not a number. Please enter a number between 8 - 128.",""));
} 

// Require length    
while (plength < 8 || plength > 128) {
var plength = parseInt(prompt("Enter length of password.* Length must be between 8 - 128 characters",""));
} 

// Confirm lower case letters 
var selectLowerCase = confirm("Use lower case letters?");
// Confirm upper case letters
var selectUpperCase = confirm("Use upper case letters?");
//Confirm numeric characters 
var selectNumber = confirm("Use numbers?");
//Confirm special characters
var selectSpecial = confirm("Use special characters?");

// Call function to generate password 
generatePassword();

// Write generated password on page
document.getElementById("password").innerHTML = userPassword; 

// From selected options randomly generate password.
function generatePassword() {
  if (selectLowerCase) {
  passwordGroup += lowerCase;
  }
  if (selectUpperCase) {
  passwordGroup += upperCase;
  }
  if (selectNumber) {
  passwordGroup += numbers;
  }
  if (selectSpecial) {
  passwordGroup += specialCharacter;
  }
  for (let i = 0; i < plength; i++) {
    userPassword += passwordGroup.charAt(
    Math.floor(Math.random() * passwordGroup.length)
    );
  }
  return userPassword;
}

/* || COPY FUNCTION || */

// https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
var copy = document.querySelector("#copy");
copy.addEventListener("click", function () {
  copyPassword();
});
function copyPassword() {
    document.getElementById("password").select();
    document.execCommand("Copy");
    alert("Password copied to clipboard!");
}

我想要它做的是等待运行提示，直到页面加载并单击生成按钮。然后当再次单击生成按钮时，我希望它清除文本区域并重复提示。目前，它在页面加载时询问提示，然后使用最初选择的相同提示再次运行该功能，并将它们添加到之前在文本区域中的文本中。

【问题讨论】：

标签： javascript html css button textarea

【解决方案1】：

为了仅在单击“生成密码”按钮时显示弹出窗口，您应该在writePassword 函数中插入所有弹出窗口：

   function writePassword() {
        
        // Request length of the password
        plength = parseInt(prompt("Welcome to Password Generator 2020. To begin, please enter a length of your password from 8-128.", ""));
    
        // Require number
        while (isNaN(plength)) {
            plength = parseInt(prompt("This is not a number. Please enter a number between 8 - 128.", ""));
        }
    
        // Require length    
        while (plength < 8 || plength > 128) {
            plength = parseInt(prompt("Enter length of password.* Length must be between 8 - 128 characters", ""));
        }
    
        // Confirm lower case letters 
        selectLowerCase = confirm("Use lower case letters?");
        // Confirm upper case letters
        selectUpperCase = confirm("Use upper case letters?");
        //Confirm numeric characters 
        selectNumber = confirm("Use numbers?");
        //Confirm special characters
        selectSpecial = confirm("Use special characters?");
    
        var password = generatePassword();
        document.querySelector("#password").value = password;
        
    }

然后，为了清除密码区域，您只需在开始生成新密码之前将 userPassword 变量设置为空字符串（因为您附加了随机生成的字符）：

function generatePassword() {
    userPassword = "";
    if (selectLowerCase) {
        passwordGroup += lowerCase;
    }
    if (selectUpperCase) {
        passwordGroup += upperCase;
    }
    if (selectNumber) {
        passwordGroup += numbers;
    }
    if (selectSpecial) {
        passwordGroup += specialCharacter;
    }
    for (let i = 0; i < plength; i++) {
        userPassword += passwordGroup.charAt(
            Math.floor(Math.random() * passwordGroup.length)
        );
    }
    return userPassword;
}

这是完整的 JavaScript 代码：

   // GenerateBtn
    var generateBtn = document.querySelector("#generate");
    
    // Define variables
    var selectLowerCase;
    var selectUpperCase;
    var selectNumber;
    var selectSpecial;
    
    // Set variables  
    var plength = 0;
    var lowerCase = "abcdefghijklmnopqrstuvwxyz";
    // Uppercase conversion
    var upperCase = lowerCase.toUpperCase();
    var numbers = "1234567890";
    var specialCharacter = "!#$%&'()*+,-./:;?@][^_`{|}~'<=>";
    var userPassword = "";
    var passwordGroup = "";
    var plength;
    var selectLowerCase;
    var selectUpperCase;
    var selectNumber;
    var selectSpecial;
    
    // Function writes password to the #password input
    function writePassword() {
        
        // Request length of the password
        plength = parseInt(prompt("Welcome to Password Generator 2020. To begin, please enter a length of your password from 8-128.", ""));
    
        // Require number
        while (isNaN(plength)) {
            plength = parseInt(prompt("This is not a number. Please enter a number between 8 - 128.", ""));
        }
    
        // Require length    
        while (plength < 8 || plength > 128) {
            plength = parseInt(prompt("Enter length of password.* Length must be between 8 - 128 characters", ""));
        }
    
        // Confirm lower case letters 
        selectLowerCase = confirm("Use lower case letters?");
        // Confirm upper case letters
        selectUpperCase = confirm("Use upper case letters?");
        //Confirm numeric characters 
        selectNumber = confirm("Use numbers?");
        //Confirm special characters
        selectSpecial = confirm("Use special characters?");
    
        var password = generatePassword();
        document.querySelector("#password").value = password;
        
    }
    
    // Clicking btn runs funtion
    generate.addEventListener("click", writePassword);
    
    
    // Call function to generate password 
    generatePassword();
    
    // Write generated password on page
    document.getElementById("password").innerHTML = userPassword;
    
    // From selected options randomly generate password.
    function generatePassword() {
        userPassword = "";
        if (selectLowerCase) {
            passwordGroup += lowerCase;
        }
        if (selectUpperCase) {
            passwordGroup += upperCase;
        }
        if (selectNumber) {
            passwordGroup += numbers;
        }
        if (selectSpecial) {
            passwordGroup += specialCharacter;
        }
        for (let i = 0; i < plength; i++) {
            userPassword += passwordGroup.charAt(
                Math.floor(Math.random() * passwordGroup.length)
            );
        }
        return userPassword;
    }
    
    /* || COPY FUNCTION || */
    
    // https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
    var copy = document.querySelector("#copy");
    copy.addEventListener("click", function() {
        copyPassword();
    });
    
    function copyPassword() {
        document.getElementById("password").select();
        document.execCommand("Copy");
        alert("Password copied to clipboard!");
    }

【讨论】：

【解决方案2】：

尝试重构您的代码

为所有提示创建一个单独的函数。

在 DOM 完全加载后调用该函数。

并且在函数开始时始终将密码 textarea 的值设置为空。

【讨论】：