document.getElementById().style.display = "block" 与 document.getElementById().innerText 的功能不同

问题描述

我有一个简单的表单，它在提交时调用函数“activate_loading”。 “activate_loading”包含两行代码，用于显示加载微调器并将提交按钮的文本更改为“请稍候”：

        document.getElementById("loader_mini").style.display = "block";

将加载微调器的显示从 display:none 更改为 display:block。

        document.getElementById("submitBtn").innerText = "Please Wait...";

将按钮的innerText更改为“请稍候”而不是“提交”

每一行都可以单独工作，但放在一起时，加载微调器的显示不会从 display:none 更改为 display: block。好像那条线

        document.getElementById("submitBtn").innerText = "Please Wait...";

原因

        document.getElementById("loader_mini").style.display = "block";

不工作。

我试过换行，结果是一样的结果。
我试过 .style.visibility="visible";而不是显示：块-> 相同的结果。
我还注意到从按钮元素。代码运行良好。
我尝试切换浏览器，但结果还是一样（在 chrome 和 firefox 上尝试过）

有人知道问题是什么吗？我真的很感激这方面的任何帮助。代码看起来很简单，但我似乎看不出是什么导致了问题。

    function activate_loading() {

            document.getElementById("loader_mini").style.display = "block"; 
            document.getElementById("submitBtn").innerText = "Please Wait...";
       }

#loader_mini{
        width: 20px;
        height: 20px;
        border: 2px solid blue;
        border-top: 2px solid white;
        border-left: 1px solid white;
        border-bottom: 0px solid white;
        border-radius: 50%;
        -webkit-animation: spin 1.2s linear infinite;
        animation: spin 1.2s linear infinite;
        display: none;
      }
        
      @-webkit-keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
        }
      }
        
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

<form id="form" method="post" class="hide_<?=$sent_status_show?>"
         onsubmit="activate_loading()">
         <label for="email">Email Address:</label>
         <input type="email" name="email"/>
         <br>
         <label for="subject">Email Subject:</label>
         <textarea name="subject"></textarea>
         <br>
         <button id="submitBtn" class="submitBtn" type="submit">
            Submit
            <div id="loader_mini">
            </div>
         </button>
     </form>

解决方法

您的代码有两个问题：

您不会停止表单提交，因此您看不到任何更改，因为页面更改。
您需要在更改文本后添加加载程序，否则文本将删除加载程序。

我做了什么？

删除 inline onchange 并直接添加一个函数（更“优雅”的代码），然后我添加 event.preventDefault(); 停止提交。下一步是更改元素 innerHTML 的位置（原为 innerText，但更改为添加加载器）。

form.onsubmit = function(event)
{
  event.preventDefault();
  activate_loading();
};
function activate_loading() {            
  document.getElementById("submitBtn").innerHTML = "Please Wait...<div id='loader_mini'></div>";
  document.getElementById("loader_mini").style.display = "block"; 
}

#loader_mini{
        width: 20px;
        height: 20px;
        border: 2px solid blue;
        border-top: 2px solid white;
        border-left: 1px solid white;
        border-bottom: 0px solid white;
        border-radius: 50%;
        -webkit-animation: spin 1.2s linear infinite;
        animation: spin 1.2s linear infinite;
        display: none;
      }
        
      @-webkit-keyframes spin {
        0% {
          -webkit-transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
        }
      }
        
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

<form id="form" method="post" class="hide_<?=$sent_status_show?>">
         <label for="email">Email Address:</label>
         <input type="email" name="email"/>
         <br>
         <label for="subject">Email Subject:</label>
         <textarea name="subject"></textarea>
         <br>
         <button id="submitBtn" class="submitBtn" type="submit">
            Submit            
         </button>
     </form>

.innerText 替换按钮内的所有内容，包括加载器元素。

这就是为什么当您使用innerText 时加载程序会消失的原因。解决方案是在按钮内有两个元素。一种用于文本，一种用于加载器。因此，当您使用 .innerText 时，您可以在文本元素而不是整个按钮上使用它。