Question

我call postAjax on button click，calls signupUser，这种方法很好，但我希望signupUser to call showWelcomeMessage由于某种原因它不起作用。我在控制台中得到no error，但“HTML中没有显示成功消息”。我也在想，也许我瞄准html的方式不正确（并且回调本身没有问题），这就是为什么我没有看到任何消息。

注意：sSuccessMessage应显示在LOGIN page（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()时隐藏它。

您可能需要使用document.getElementById()

按ID查询元素

<强>更新

如果您不想按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" );
  });
}

Answer 2

它以这种方式工作，但我不确定这是否是最佳方式。

  function showSuccessMessage ( sSuccessMessage ) {
    var alblMessages = document.getElementsByClassName( "lblMessage" );
      for ( var i = 0; i < alblMessages.length; i++ ) {    
        alblMessages[i].insertAdjacentHTML('beforeend', sSuccessMessage.fontcolor( "#549839" ));
      }    
  }

第二次回调不起作用

2 个答案: