Javascript切换样式显示ON / OFF在单个功能中不起作用？

Question

我想在函数开始时显示加载模态，并在函数完成时关闭模态。

这里是一个例子：

1. 打开加载模式
2. 执行一个功能。这是alert（'test'）
3. 关闭模式

这真的很简单，但是却行不通〜

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

但是，如果分开切换过程，则可以正常工作。

换句话说，使用两个onclick按钮。

<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>

这确实造成了很大的混乱，有人会帮助解释JS onclick事件的执行顺序。

该代码是从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>