当变量为真时，为什么JavaScript执行DOM语句最后？ [英] Why is JavaScript executing DOM statements last when a variable is true?

问题描述

今天我已经解决了大量的错误，但是这个错误我无法解决。

下面的代码是一个非常简单的登录页面。此时唯一正确的用户名为admin，该用户唯一正确的密码为密码。

这是代码：

  function loginauth（）{
 var success = false; 
 var Xusername = document.getElementById（lsr1u）。 
 var Xpassword = document.getElementById（lsr1p）。 
 if（Xusername ==admin）{
 if（Xpassword ==password）{
 success = true; 
} else {
 document.getElementById（wrong）。innerHTML =用户名或密码不正确。 
} 
} else {
 document.getElementById（wrong）。innerHTML =用户名或密码不正确。 
} 
 if（success）{
 if（success）{
 document.getElementById（wrong）。innerHTML =（s）; 
} 
 //成功登录操作
 alert（success）; 
 //document.getElementById(\"author\").innerHTML =success; //完成时删除
 alert（x）; 
} 
} 
  

无论什么原因，最后一个代码是执行，但使用这个catch：在之前弹出（成功），然后（x）弹出的两个警告框，document.getElementById将id为wrong的段落的innerHTML更改为s 。

这段代码中没有什么可以发现会导致问题。我甚至双重嵌套成功if / else语句，以确保DOM将首先被更改。但是这没有办法。

请注意，此页面上的另一个document.getElementByIds用户名或密码不正确工作完全正常，因为它们是to（var success if false then）。如果我的成功没有任何警报框，如果/ else阻止在最后，那么它从来没有甚至运行该DOM代码，它永远不会改变为's'。所以今天有一些很奇怪的事情。

这只是在Chrome中发生，我想。在Internet Explorer和Edge中可以正常工作。

解决方案

如果您希望在更改后弹出警报，只需将其包装起来一个 setTimeout 像这样：

  document.body.textContent =hhh; setTimeout（function（）{alert（x）;}，0）;  

/ div>

I've been solving a ton of bugs today, but this one bug I can't work out.

The code below is for a very simple logon page. The only correct username at this point is 'admin' and the only correct password, for that user, is 'password'.

Here is the code:

function loginauth() {
  var success = false;
  var Xusername = document.getElementById("lsr1u").value;
  var Xpassword = document.getElementById("lsr1p").value;
  if (Xusername == "admin") {
    if (Xpassword == "password") {
      success = true;
    } else {
      document.getElementById("wrong").innerHTML = "The username or password is incorrect."
    }
  } else {
    document.getElementById("wrong").innerHTML = "The username or password is incorrect."
  }
  if (success) {
    if (success) {
      document.getElementById("wrong").innerHTML = ("s");
    }
    // successful login operations here
    alert("success");
    //document.getElementById("author").innerHTML = "success"; //remove when done
    alert("x");
  }
}

For whatever reason, the last chunk of is code is executing, but with this catch: the two alert boxes that pop up (success) and then (x) pop up before the document.getElementById changes the innerHTML for the paragraph with id "wrong" to "s".

There is nothing in this code I can find that would be causing a problem. I even double nested the success if/else statements to make sure that the DOM would get changed first. But that didn't work.

Note that the two other document.getElementByIds on this page for "The username or password is incorrect" work perfectly fine, as they are supposed to (var success if false then). And if I don't have any alert boxes in my success if/else block at the end, then it never even runs that DOM code and it never changes to 's'. So something very strange is going on today.

This only happens in Chrome, I think. It works okay in Internet Explorer and Edge.

解决方案

If you want the alerts to pop up after the changes then just wrap them inside a setTimeout like this:

document.body.textContent = "hhh";

setTimeout(function() {
  alert("x");
}, 0);

这篇关于当变量为真时，为什么JavaScript执行DOM语句最后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！