Question

<HTML>
  <HEAD>
    <TITLE> Username Generator </TITLE>
  </HEAD>
  <style>
    //: the code below was adapted from w3schools (dropdown code)
    .dropbtn:hover, .dropbtn:focus {   
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown a:hover {
      background-color: #f1f1f1
    }

    .show {
      display:block;
    }

    //: the code above was adapted from w3schools
  </style>
  <BODY>
    <h2>Username Generator</h2>
    <script>
      var userName = ""
      var fName = ""
      var lName = ""
      var age = ""
      var flname = ""
      var flNameAge = ""
      var lfName = ""

      function prompts() {
        fName = window.prompt("please enter your first name")
        lName = window.prompt("please enter your last name")
        age = window.prompt("please enter your birth year (in 'yy' form not 'yyyy' form)")

        genUsers()
      }

      function genUsers() {
        flName = fName + lName;
        document.getElementById("name").innerHTML = flName;

        flNameAge = flName + age;
        document.getElementById("age").innerHTML = flNameAge;

        lfName = lName + fName;
        document.getElementById("lname").innerHTML = lfName;

        lfNameAge = lName + fname + age;
        document.getElementById("lage").innerHTML = lfNameAge
      }

      function flNameClick() {
        userName = flName;
        alert(userName + " is your new username, try it out");
      }

      function flNameAgeClick() {
        userName = flNameAge;
        alert(userName + " is your new username, try it out");
      }

      function lfNameClick() {
        userName = lfName;
        alert(userName + " is your new username, try it out");
      }

      function checkLogin(x) {
        if ((x.id.value != userName)||(x.pass.value !="123")) {
          alert("Invalid Login");
          return false;
        }
        else
          alert("Congrats you have logged in")
      }

      //: the code below was adapted from w3schools
      function dropdown() {
        document.getElementById("myDropdown").classList.toggle("show");
      }

      window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
          var dropdowns = document.getElementsByClassName("dropdown-content");
          var i;

          for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
              openDropdown.classList.remove('show');
            }
          }
        }
      }
      //: the code above was adapted from w3schools
    </script>
    <form>
      <p>UserID:<input type="text" name="id"></p>
      <p>Password:<input type="password" name="pass"></p>
      <p><input type="button" value="Login" onClick="checkLogin(this.form)"></p>
      <input type="button" value="Click Here To Generate Username" onClick="prompts()">
    </form>
    <div class="dropdown">
      <button onclick="dropdown()" class="dropbtn">Username Choices</button>
      <div id="myDropdown" class="dropdown-content">
        <a id="name" onClick="flNameClick()"> CLICK</a>
        <a id="age" onClick="flNameAgeClick()">GEN</a>
        <a id="lname" onClick="lfNameClick()">BUTTON</a>
      </div>
    </div>
  </BODY>
</HTML>

到目前为止，除了“用户名”的最后部分外，一切都按预期工作。变量更改为您在下拉菜单中选择的任何选项，从那里，您应该能够使用新变量输入作为书面登录。我的问题是这个变量在定义后不被接受为有效的书面登录。我相信这个错误发生在函数checkLogin（x）和代码中代码的第一部分，因为这是变量＆＃39; userName应该被转移的地方。我不知道为什么这个变量没有按预期工作，我迫切需要帮助。请指教。

HTML / Javascript登录，＆＃39; userName＆＃39;变量在登录代码部分不起作用

0 个答案: