Javascript toggles style display ON/OFF does not work in a single function?

I want to display a loading modal when the beginning of a function and close the modal when the function is done.

Here is an example:

1. Open the loading modal
2. Execute a function. Here is alert('test')
3. Close the modal

It is really simple but it just does not work~

<button onclick="document.getElementById('id01').style.display='block';alert('test');document.getElementById('id01').style.display='none';" class="w3-button w3-black">Open Modal</button>

But, if the toggle process is separated it works fine.

In other words, using two onclick buttons.

<button onclick="document.getElementById('id01').style.display='block';alert('test');" class="w3-button w3-black">Open Modal</button>

<button onclick="document.getElementById('id01').style.display='none';" class="w3-button w3-black">Open Modal</button>

It really makes big confuse and would someone help to explain the order-of-execution of the JS onclick event.

The code is pasted from W3cshools. https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal

    
    <div class="w3-container">
      <h2>W3.CSS Modal</h2>
      <button onclick="document.getElementById('id01').style.display='block';alert('test');document.getElementById('id01').style.display='none';" class="w3-button w3-black">Open Modal</button>
    
      <div id="id01" class="w3-modal">
        <div class="w3-modal-content">
          <div class="w3-container">
            <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
            <p>Some text. Some text. Some text.</p>
            <p>Some text. Some text. Some text.</p>
          </div>
        </div>
      </div>
    </div>