JSコンソールで作業を行いますが、onclickの

Question

と私はWebプログラミングに新しいですし、（単独でHTML、CSSやJSで）ログイン機能をやって試してみましたが、それはまだ動作しませんではない：/

<li> 
    <a id="myLink" href="#" onclick="MyFunction();"> 
     <i class="fa fa-user-plus" aria-hidden="true"></i> 
     &nbsp;Register 
    </a> 
    <script> 
     function MyFunction() { 
      var username = prompt("Please choose a username"); 
      var password = prompt("Please choose a password"); 
     } 
    </script> 
</li> 
<li> 
    <a id="myPw" href="#" onclick="MyPassword();"> 
     <i class="fa fa-unlock" aria-hidden="true"></i> 
     &nbsp;Login 
    </a> 
    <script> 
     function MyPassword() { 
      var verifyuser = prompt("Please enter your username") 
      var verifypw = prompt("Please enter your password") 
      if (verifyuser === username && verifypw === password) { 
       alert("You have been logged in!") 
      } 
     } 
    </script> 

だから、基本的に私が "register"をクリックすると、訪問者はユーザー名とpwを選択するように求められます。彼は "login"をクリックするとログインすることができます しかし、登録して "username "var" username "が記憶されているかどうかを確認するには、 Uncaught ReferenceError: username is not defined(…)が得られます。

「登録」をクリックせずにjsコードをjsコンソールに手動で入力するだけで動作します。だから私はコンソール（これはそれぞれ1行）にこれを入力しています：

var username = prompt("Please choose a username"); //now I enter a username 
var password = prompt("Please choose a password"); //now I enter a pw 
username (now it displays what I just entered when I was prompted for username) 
password (now it displays what I just entered for password) 

問題は何ですか？

Answer 1

Javascriptの変数は、それらが宣言されている機能にスコープされています。var passwordとvar usernameがMyFunctionの内側に書かれているので、それはあなたがそれらにアクセスできる唯一の場所ですので。

あなたがしたいことは、これらの変数をグローバルスコープで宣言することです。これを行うには、最初のスクリプトを次のように置き換えます。

<script> 
    var username; 
    var password; 

    function MyFunction() { 
     username = prompt("Please choose a username"); 
     password = prompt("Please choose a password"); 
    } 
</script>