javascript - 第二次回调不起作用

Question

我在按钮单击时调用postAjax，它调用signupUser，这工作正常，但是我希望signupUser调用showWelcomeMessage，这对于某些人来说原因是它不起作用。我在控制台中收到无错误，但“HTML 中未显示成功消息”。我还想，也许我针对 html 的方式不正确(并且回调本身没有问题)，这就是为什么我没有看到任何消息。

注意:sSuccessMessage 应该显示在 LOGIN 页面 (html div) 上，因为注册成功后，SIGNUP 页面 ( html div ) 会被隐藏，而 LOGIN 会显示出来.

请帮我找出问题所在。

// GLOBAL ARRAY for storing any DATA from the SERVER
  var ajDataFromServer = [];

  /************************************************************************/
  /************************************************************************/
  /************************************************************************/


  // Main ajax function using callback for posting data to the server
  function postAjax( sUrl , frmData, callback ){
              var ajax = new XMLHttpRequest();
              ajax.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var ajDataFromServer = JSON.parse(this.responseText);
                    callback( ajDataFromServer, showSuccessMessage );
                }
            }           
              ajax.open( "POST", sUrl , true );
              var jFrm = new FormData( frmData );
              ajax.send( jFrm )                 
            }



  // DO the SIGNUP, POST data to the SERVER with AJAX

  btnSignupForm.addEventListener("click", function (e) {
      //var lblErrorMessage = e.target.parentNode.nextSibling.contains.classList("lblErrorMessage");
      postAjax("api_signup_users.php", frmSignup, signupUser);
  });

  function signupUser( ajUserDataFromServer, showSuccessMessage ) {

              if ( ajUserDataFromServer.status == "ok" ) {

                  //console.log( "SIGNUP SUCCESFULL" );
                  pageLogin.style.display = "flex";
                  pageSignup.style.display = "none";
                  showSuccessMessage( "Account succesfully created - Signup please" );

              } else {

                  //console.log( "SIGNUP FAIL - TRY AGAIN" );
                  pageViewProducts.style.display = "none";
                  pageLogin.style.display = "none";
                  pageSignup.style.display = "flex";
                  lblSignupErrorMessage.innerHTML = "";
                  var sSignupErrorMessage = "Signup Failed - Try again";
                  lblSignupErrorMessage.insertAdjacentHTML( 'beforeend', sSignupErrorMessage );

              }
          }


  /************************************************************************/
  /************************************************************************/
  /************************************************************************/


  function showSuccessMessage ( sSuccessMessage ) {
        var lblErrorMessage = document.querySelector(".lblErrorMessage");
        lblErrorMessage.innerHTML = "";
        var sSuccessMessage = sSuccessMessage.fontcolor( "#549839" );
        lblErrorMessage.insertAdjacentHTML('beforeend', sSuccessMessage);
   }

Here is the HTML part: 
<!-- SIGNUP for USERS and ADMIN -->
    <div id="pageSignup" class="page popup">
      <div class="wrapper">  
        <h3>SIGNUP</h3>
        <form class="form" id="frmSignup">
           <input type="text" name="txtEmailorPhoneNumber" placeholder="Mobile number or Email" required> 
           <input type="text" name="txtName" placeholder="Name" required>
           <input type="text" name="txtLastName" placeholder="Lastname" required> 
           <input type="password" name="txtPassword" placeholder="Password" required>
           <div class="lblFileUpload">
              <p>Select your picture:</p>
              <input type="file" name="fileUserImage" required>
            </div>
           <button type="button" class="btnForm" id="btnSignupForm">Signup</button>
            <div class="lblFormExtention">
              <p class="pyesAccount">Already have an account?</p> 
              <button type="button" class="btnShowPage" id="btnLogin" data-showThisPage="pageLogin">Login</button>
            </div>
        </form>
        <h3 class="lblErrorMessage" id="lblSignupErrorMessage"></h3>
      </div>
    </div> 

    <!-- ********************************************************************** -->
    <!-- ********************************************************************** -->
    <!-- ********************************************************************** -->

    <!-- LOGIN for USERS and ADMIN -->
    <div id="pageLogin" class="page popup">
        <div class="wrapper"> 
            <h3>LOGIN</h3>
            <form class="form" id="frmLogin">
               <input type="text" name="txtEmailorPhoneNumber" placeholder="Mobile number or Email" required>
               <input type="text" name="txtPassword" placeholder="Password" required>
               <button type="button" class="btnForm" id="btnLoginForm">Login</button>
                <div class="lblFormExtention">
                  <p class="pnoAccount">Don´t have an account?</p>
                  <button type="button" class="btnShowPage" id="btnSignup">Signup</button>
                </div>
            </form>
            <h3 class="lblErrorMessage" id="lblLoginErrorMessage"></h3>
        </div>
    </div>

    <!-- ********************************************************************** -->
    <!-- ********************************************************************** -->
    <!-- ********************************************************************** -->

    <!-- SUBSCRIBE for USERS -->
    <div id="pageSubscribe" class="page popup">
        <div class="wrapper"> 
            <h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
            <form class="form" id="frmSubscribe">
               <input type="text" name="txtEmail" placeholder="Email" required> 
               <input type="text" name="txtName" placeholder="Name" required>
               <input type="text" name="txtLastName" placeholder="Lastname" required>
               <input type="text" name="txtAddress" placeholder="Address" required>
               <div id="mapinForm">
                    <!-- Generated dynamically -->
                </div>
               <button type="button" class="btnForm" id="btnSubscribeForm">Subscribe</button>   
            </form>
            <h3 class="lblErrorMessage" id="lblSubscribeErrorMessage"></h3>
        </div>
    </div>

Answer 1

当您通过 document.querySelector(".lblErrorMessage") 查询元素时你得到该类的第一个元素，即 <h3 class="lblErrorMessage" id="lblSignupErrorMessage"></h3>当您调用showSuccessMessage()时它是隐藏的.

您可能需要通过 ID 查询元素，使用 document.getElementById()

更新:

如果您不想通过 ID 查询每个元素，您的解决方案是更新每个 .lblErrorMessage元素:

function showSuccessMessage ( sSuccessMessage ) {
  Array.prototype.forEach.call(document.querySelectorAll(".lblErrorMessage"), function (el) {
    el.innerHTML = "";
    el.insertAdjacentHTML('beforeend', sSuccessMessage.fontcolor( "#549839" ));
    // or simply use the following form:
    // el.innerHTML = sSuccessMessage.fontcolor( "#549839" );
  });
}