函数和 if else javascript 问题

Question

我到了最后一步，如果两个字段都已填写，我需要显示的是成功消息，而不是错误消息。是不是其他的？还是我必须创建一个 while 循环？我当前的问题是在两个字段都填满后显示成功消息。我已经尝试了 if 语句的不同变体，但还没有任何效果。

< script >
  function login() {

    // variables for text box values
    var userName = document.getElementById("username").value;
    var password = document.getElementById("pw").value;

    // variables for error messages
    var theError = document.getElementById("error");

    // clear out error messages each time
    theError.innerHTML = "";

    if (userName == "") {
      theError.innerHTML = "please enter a username and password";
      return false;
    } else {
      theError.innerHTML = "";
    }
    if (password == "") {
      theError.innerHTML = "please enter a username and password";
      return false;
    } else {
      theError.innerHTML = "";
      return true
    }

  } //end function

function init() {
  document.getElementById("button").onclick = login;
}

window.onload = init; < /script>
<script>
/ / Fading in Advertisent

$(document).ready(function() {


  $("#ad").animate({
    top: '100px',
  }, (5000));


  //Closing The Advertisement
  $("#adbtn").click(function() {
    $("#ad").fadeOut(5000);
  });


  //Sliding login form
  $(".plus").click(function() {
    $("form").slideToggle(1000); // half second duration
    $(this).toggleClass("plus").toggleClass(
      "minus");
  });

});

< /script>

<style> body {
  background-color: #fff;
  font-family: arial, sans-serif;
  font-size: 100%;
}
a {
  color: blue;
}
#welcome p strong {
  color: navy;
  font-size: 1.2em;
}
#welcome p:first-of-type {
  margin-bottom: 50px;
}
section {
  margin-bottom: 50px;
}
/* main container */

#main {
  width: 960px;
  margin: 50px auto;
  border: 2px solid #000;
  padding: 20px;
  background-color: #e0e0ff;
  position: relative;
  box-sizing: border-box;
}
/* form container */

#loginDiv {
  width: 300px;
  position: absolute;
  left: 650px;
  top: 6px;
  z-index: 100;
  border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */

#login {
  margin: 0;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  padding: 5px 0 2px 30px;
}
#login:hover {
  background-color: rgb(110, 138, 195);
}
/*  plus sign icon for login form */

.plus {
  background: url(img_open.png) no-repeat 8px 7px;
  background-color: rgb(110, 138, 195);
}
/* minus sign icon for login form */

.minus {
  background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */

#loginDiv form {
  padding: 10px 10px 10px 10px;
  display: none;
  background-color: rgb(255, 255, 255);
}
#loginDiv label {
  display: block;
  width: 100px;
  margin: 0 15px 0 0;
}
#loginDiv input {
  font-size: 1.2em;
  border: 1px solid navy;
}
#loginDiv input:focus {
  background-color: rgb(110, 138, 195);
  border: 2px solid navy;
}
#loginDiv input[type=button] {
  width: 100px;
}
footer {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 10px;
  padding: 20px;
  border-top: 1px solid #000;
}
/* ad is not shown when the page loads  */

#ad {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-color: yellow;
  position: absolute;
  left: 330px;
  top: -500px;
  /* you can change this inbitially for viewing purposes only but be sure to set it back */
  box-sizing: border-box;
  background-image: url(ad.jpg);
  background-repeat: no-repeat;
}
/* close button on ad */

#adbtn {
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  background-color: #fff;
  font-size: 3em;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Assignment 6</title>

  <!-- video  https://youtu.be/XEoWYcolaEM -->


  <script src="jquery-1.12.3.min.js" type="text/javascript"></script>
  <script href="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
  <script href="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
  <script href="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script>

</head>

<body>

  <!-- main container -->
  <div id="main">
    <section id="loginDiv">
      <!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
      <p id="login" class="plus">Login</p>
      <form>
        <p>
          <label for="username">Username:</label>
          <input type="text" name="username" id="username">
        </p>
        <p>
          <label for="pw">Password:</label>
          <input type="password" name="pw" id="pw">
        </p>
        <p>
          <input id="button" type="button" value="Submit">
        </p>

        <!-- placeholder for response if form data is correct/incorrect -->
        <p id="error"></p>
      </form>
    </section>
    <section id="welcome">
      <h1>Welcome to the Local jQuery User Group Website</h1>
      <p> <strong>Click the login button at the top of the page to login. To become a member please <a href="#">Register</a></strong> 
      </p>
      <h2>About this page layout:</h2>
      <p>The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to that main container. Otherwise, it would default to being absolutley positioned with respect to the window.</p>
      <p>In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise, it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of the
        normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container.</p>
    </section>
    <section>
      <h2>This week's agenda:</h2>
      <p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software. It will be recorded! Please note that the code samples will be available on our GitHub repository.</p>
    </section>
    <footer>Copyright &copy; Local jQuery User Group</footer>

    <!--  ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
    <div id="ad">
      <div id="adbtn">X</div>
    </div>

    <!-- end main container -->
  </div>
</body>

</html>

Answer 1

放置一个else条件

function login() {
  var userName = document.getElementById("username").value;
  var password = document.getElementById("pw").value;
  var theError = document.getElementById("error");
  //theError.innerHTML = "";//No need of this as is is being manipulated in conditions
  if (userName == "" || password == "") { //As message is same for both the inputs, || could be used
    theError.innerHTML = "please enter a username and password";
    return false;
  } else {
    theError.innerHTML = "Success!";
    return true
  }
}

function init() {
  document.getElementById("button").onclick = login;
}

window.onload = init;
$(document).ready(function() {
  $("#ad").animate({
    top: '100px',
  }, (5000));
  $("#adbtn").click(function() {
    $("#ad").fadeOut(5000);
  });
  $(".plus").click(function() {
    $("form").slideToggle(1000); // half second duration
    $(this).toggleClass("plus").toggleClass(
      "minus");
  });
});

<style> body {
  background-color: #fff;
  font-family: arial, sans-serif;
  font-size: 100%;
}
a {
  color: blue;
}
#welcome p strong {
  color: navy;
  font-size: 1.2em;
}
#welcome p:first-of-type {
  margin-bottom: 50px;
}
section {
  margin-bottom: 50px;
}
/* main container */

#main {
  width: 960px;
  margin: 50px auto;
  border: 2px solid #000;
  padding: 20px;
  background-color: #e0e0ff;
  position: relative;
  box-sizing: border-box;
}
/* form container */

#loginDiv {
  width: 300px;
  position: absolute;
  left: 650px;
  top: 6px;
  z-index: 100;
  border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */

#login {
  margin: 0;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  padding: 5px 0 2px 30px;
}
#login:hover {
  background-color: rgb(110, 138, 195);
}
/*  plus sign icon for login form */

.plus {
  background: url(img_open.png) no-repeat 8px 7px;
  background-color: rgb(110, 138, 195);
}
/* minus sign icon for login form */

.minus {
  background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */

#loginDiv form {
  padding: 10px 10px 10px 10px;
  display: none;
  background-color: rgb(255, 255, 255);
}
#loginDiv label {
  display: block;
  width: 100px;
  margin: 0 15px 0 0;
}
#loginDiv input {
  font-size: 1.2em;
  border: 1px solid navy;
}
#loginDiv input:focus {
  background-color: rgb(110, 138, 195);
  border: 2px solid navy;
}
#loginDiv input[type=button] {
  width: 100px;
}
footer {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 10px;
  padding: 20px;
  border-top: 1px solid #000;
}
/* ad is not shown when the page loads  */

#ad {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-color: yellow;
  position: absolute;
  left: 330px;
  top: -500px;
  /* you can change this inbitially for viewing purposes only but be sure to set it back */
  box-sizing: border-box;
  background-image: url(ad.jpg);
  background-repeat: no-repeat;
}
/* close button on ad */

#adbtn {
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  background-color: #fff;
  font-size: 3em;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script href="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<script href="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script href="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script>

<!-- main container -->
<div id="main">
  <section id="loginDiv">
    <!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
    <p id="login" class="plus">Login</p>
    <form>
      <p>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username">
      </p>
      <p>
        <label for="pw">Password:</label>
        <input type="password" name="pw" id="pw">
      </p>
      <p>
        <input id="button" type="button" value="Submit">
      </p>

      <!-- placeholder for response if form data is correct/incorrect -->
      <p id="error"></p>
    </form>
  </section>
  <section id="welcome">
    <h1>Welcome to the Local jQuery User Group Website</h1>
    <p> <strong>Click the login button at the top of the page to login. To become a member please <a href="#">Register</a></strong> 
    </p>
    <h2>About this page layout:</h2>
    <p>The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to that main container. Otherwise, it would default to being absolutley positioned with respect to the window.</p>
    <p>In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise, it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of the
      normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container.</p>
  </section>
  <section>
    <h2>This week's agenda:</h2>
    <p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software. It will be recorded! Please note that the code samples will be available on our GitHub repository.</p>
  </section>
  <footer>Copyright &copy; Local jQuery User Group</footer>
  <div id="ad">
    <div id="adbtn">X</div>
  </div>
</div>

Answer 2

你的问题不够清楚，我不确定你想在哪里显示成功消息，无论如何，我假设你想在"theError"中显示我在js文件中添加了一些更改并且创建了一个 plunker link 如果你想实时查看它：

 function login() {

    // variables for text box values
    var userName = document.getElementById("username").value;
    var password = document.getElementById("pw").value;

    // variables for error messages
    var theError = document.getElementById("error");

    // clear out error messages each time
    theError.innerHTML = "";

    if (userName === "") {
      theError.innerHTML = "please enter a username and password";
      return;
    } else {
      theError.innerHTML = "";
    }
    if (password === "") {
      theError.innerHTML = "please enter a username and password";
      return;
    } else {

      theError.innerHTML = "";
    }
    theError.innerHTML = "Success ";
    
    return;

  } //end function

Plunker link

函数和 if else javascript 问题

function and if else javascript issue

javascript

validation

warnings

function