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>

因此，基本上，当我单击“注册”时，系统会提示访问者选择用户名和密码，然后如果他单击“登录”，他以后可以用来登录。但是，如果我在注册并输入“用户名”后进入Java控制台只是想看看是否记住了var“用户名”，我得到了Uncaught ReferenceError: username is not defined(…) 。

但是，当我不单击“注册”而只是在js控制台中手动键入js代码时，它确实可以工作。 所以我要在控制台中键入此内容（每行一行）：

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>