Why does the div not disappear?

Question

Why when I try and hid a div for an operation does it not disappear? It is my understanding that you can hide something using document.getElementById('something').style.display = "none";. Yet when I try and do an operation in between showing and hiding it, it does not work.

 function someComplicatedFunction(ms) {
        // This isn't the exact function I am using, 
        // but it has a similar form and the same problem
        let start = new Date().getTime();
        let end = start;
        while (end < start + ms) {
            end = new Date().getTime();
        }
    }
    
    function hideTheOtherDiv() {
     document.getElementById('div1').style.display = "none";
        document.getElementById('div2').style.display = "initial";
        console.log("Start");

        someComplicatedFunction(3000);
        
        console.log("end");
        document.getElementById('div1').style.display = "initial";
        document.getElementById('div2').style.display = "none";
    }
    
    document.getElementById('div2').style.display = "none";

<!DOCTYPE html>
<html>
<body>

<div id="div1">One</div>
<div id="div2">Two</div>
<button onclick="hideTheOtherDiv()">Switch</button>

</body>

<script type="text/javascript">


</script>

</html>

That `wait` function is so wrong I don't know where to begin :P Have a look at `setTimeout` — powerbuoy, Jul 20 '17 at 17:48
It's _because_ of that silly `wait` function, that keeps the interpreter busy without any interruption. Please go research why this kind of a "wait" function is about the worst thing to possibly come up with. — CBroe, Jul 20 '17 at 17:50
Basically the problem is you don't release control back to the browser to render your change. — James Gaunt, Jul 20 '17 at 17:51
Yes, the problem seems to be with wait. Using setTimeout() would be better here. — Jarek Kulikowski, Jul 20 '17 at 18:09

Pawan Kumar · Accepted Answer · 2017-07-20T19:20:00.103

Use setTimeout() method instead of someComplicatedFunction() method.

As JavaScript only has a single thread and method will execute asynchronously so webpage will be unresponsive while the script is running. This is the reason we can't see the data changes if use someComplicatedFunction() method as dom manipulation done within a ms and page become unresponsive while executing that method for 3 seconds.

function hideTheOtherDiv() {

  document.getElementById('div1').style.display = "none";
  document.getElementById('div2').style.display = "initial";
  console.log("Start");

  setTimeout(function() {
    console.log("end");
    document.getElementById('div1').style.display = "initial";
    document.getElementById('div2').style.display = "none";
  }, 3000);
}

document.getElementById('div2').style.display = "none";

<!DOCTYPE html>
<html>

<body>

  <div id="div1">One</div>
  <div id="div2">Two</div>
  <button onclick="hideTheOtherDiv()">Switch</button>

</body>

<script type="text/javascript">
</script>

</html>

Thanks, but what is causing the other function to not allow it to work? Cause in my actual code I have a much more complicated function that has a purpose rather then just waiting — user1762507, Jul 20 '17 at 18:04

Jarek Kulikowski · Answer 2 · 2017-07-20T19:06:30.040

0

function hideTheOtherDiv() {
    document.getElementById('div1').style.display = "none";
    document.getElementById('div2').style.display = "initial";

    setTimeout( function() {
        document.getElementById('div1').style.display = "initial";  
        document.getElementById('div2').style.display = "none";
    }, 3000);
}

edited Jul 20 '17 at 19:06

answered Jul 20 '17 at 18:12

Jarek Kulikowski

1,399
8
9

What is this? What does it do? How does it answer the question? – Rob Jul 20 '17 at 19:05
@Rob I wanted to suggest a solution that would work and implement more standard approach. Implementation of wait with a while loop is not really that good a practice. But you are right. It doesn't explain why his code breaks when he uses wait(...). I didn't think there was much point to it. – Jarek Kulikowski Jul 20 '17 at 19:11

Why does the div not disappear?

2 Answers2