JavaScript関数を再度実行した後、テキスト領域をクリアするのに助けが必要

WasteOfADrumBum
<!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!");
}

私がやりたいのは、ページが読み込まれて生成ボタンをクリックするまでプロンプトを実行するのを待つことです。次に、生成ボタンをもう一度クリックすると、テキスト領域がクリアされ、プロンプトが繰り返されます。現在、ページが読み込まれたときにプロンプ​​トを表示し、最初に選択したのと同じプロンプトで関数を再度実行して、以前にテキスト領域のテキストに追加しました。

エールグ

「パスワードの生成」ボタンがクリックされたときにのみポップアップを表示するには、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、新しいパスワードの生成を開始する前に変数をnull文字列に設定する必要があります(ランダムに生成された文字を追加するため)。

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!");
    }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

座標を使用して長方形の領域を見つけるために関数をテストしようとする助けが必要です

分類Dev

角度でPUT関数の後にGETを実行するのに助けが必要

分類Dev

JavaScriptのオブジェクトリテラル関数を理解するのに助けが必要です

分類Dev

Javascript-私はjavascript関数にチェックボックスを作成しましたそれらをリンクするのに助けが必要です

分類Dev

html要素を解析してスクリプトを実行するのに助けが必要です

分類Dev

変更イベントのMETEORは、テキスト領域をクリックした後にのみテキスト領域で起動されます

分類Dev

Nette、計算を実行するためにテキスト領域から数値を抽出します

分類Dev

私のsqlステートメントに関数を追加するための助けが必要です

分類Dev

javascriptのテキストを切り替えるのに助けが必要です

分類Dev

javascriptのテキストを切り替えるのに助けが必要です

分類Dev

Arduinoでテキストファイルを実行するのに助けが必要

分類Dev

オブジェクト内の領域をクリックしたときに関数を実行するにはどうすればよいですか?

分類Dev

行カウンター関数increment()と関数parse()で2つのテキスト領域をクリアします

分類Dev

Excelの数式を介してテキスト文字列から日付を抽出するのに助けが必要

分類Dev

フォームが送信されたときに質問の表示テキスト領域を解釈するのに助けが必要ですが、フォームにonSubmitがありません

分類Dev

関数を使用して3つのテキスト入力間を移動するのに助けが必要です

分類Dev

与えられたリストから単語を提案する関数を作成するための助けが必要

分類Dev

別のスクリプトが終了した後に実行するJavaScript関数を呼び出すにはどうすればよいですか?

分類Dev

notepad ++とpythonスクリプトプラグインを使用して、テキストファイルの通貨換算のために数値を丸めるのに助けが必要です

分類Dev

PowerShellスクリプトを作成するときは、関数内のコードを有効にするために行った変更を2回実行する必要があります。助言がありますか?

分類Dev

Postgresqlクエリの実行を理解するのに助けが必要

分類Dev

JavaScriptでの関数呼び出しを理解するのに助けが必要

分類Dev

正しく渡されたときにhtmlhrefリンクを作成するphpでifステートメントを作成するのに助けが必要

分類Dev

C ++の構成とクラス関数を理解するのに助けが必要

分類Dev

特定の条件でテキスト領域を空にするためのヘルプが必要です

分類Dev

入力領域(複数の入力)をクリックすると、テキストが自動的にコピーされますJavascript

分類Dev

パスワードを入力した後、index.htmlにリダイレクトするのに助けが必要

分類Dev

React | 親が「アンチパターン」でなくてもクリックしたときに、子のテキスト領域に焦点を合わせます

分類Dev

Javascript-テキストを入力し、複数の領域に出力します

Related 関連記事

  1. 1

    座標を使用して長方形の領域を見つけるために関数をテストしようとする助けが必要です

  2. 2

    角度でPUT関数の後にGETを実行するのに助けが必要

  3. 3

    JavaScriptのオブジェクトリテラル関数を理解するのに助けが必要です

  4. 4

    Javascript-私はjavascript関数にチェックボックスを作成しましたそれらをリンクするのに助けが必要です

  5. 5

    html要素を解析してスクリプトを実行するのに助けが必要です

  6. 6

    変更イベントのMETEORは、テキスト領域をクリックした後にのみテキスト領域で起動されます

  7. 7

    Nette、計算を実行するためにテキスト領域から数値を抽出します

  8. 8

    私のsqlステートメントに関数を追加するための助けが必要です

  9. 9

    javascriptのテキストを切り替えるのに助けが必要です

  10. 10

    javascriptのテキストを切り替えるのに助けが必要です

  11. 11

    Arduinoでテキストファイルを実行するのに助けが必要

  12. 12

    オブジェクト内の領域をクリックしたときに関数を実行するにはどうすればよいですか?

  13. 13

    行カウンター関数increment()と関数parse()で2つのテキスト領域をクリアします

  14. 14

    Excelの数式を介してテキスト文字列から日付を抽出するのに助けが必要

  15. 15

    フォームが送信されたときに質問の表示テキスト領域を解釈するのに助けが必要ですが、フォームにonSubmitがありません

  16. 16

    関数を使用して3つのテキスト入力間を移動するのに助けが必要です

  17. 17

    与えられたリストから単語を提案する関数を作成するための助けが必要

  18. 18

    別のスクリプトが終了した後に実行するJavaScript関数を呼び出すにはどうすればよいですか?

  19. 19

    notepad ++とpythonスクリプトプラグインを使用して、テキストファイルの通貨換算のために数値を丸めるのに助けが必要です

  20. 20

    PowerShellスクリプトを作成するときは、関数内のコードを有効にするために行った変更を2回実行する必要があります。助言がありますか?

  21. 21

    Postgresqlクエリの実行を理解するのに助けが必要

  22. 22

    JavaScriptでの関数呼び出しを理解するのに助けが必要

  23. 23

    正しく渡されたときにhtmlhrefリンクを作成するphpでifステートメントを作成するのに助けが必要

  24. 24

    C ++の構成とクラス関数を理解するのに助けが必要

  25. 25

    特定の条件でテキスト領域を空にするためのヘルプが必要です

  26. 26

    入力領域(複数の入力)をクリックすると、テキストが自動的にコピーされますJavascript

  27. 27

    パスワードを入力した後、index.htmlにリダイレクトするのに助けが必要

  28. 28

    React | 親が「アンチパターン」でなくてもクリックしたときに、子のテキスト領域に焦点を合わせます

  29. 29

    Javascript-テキストを入力し、複数の領域に出力します

ホットタグ

アーカイブ