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

Question

我有一个简单的表单，它在提交时调用函数“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: 块。好像那行

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

原因

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

不工作。

1. 我试过换行，结果相同 结果。
2. 我试过 .style.visibility="visible";而不是显示：块-> 结果相同。
3. 我还注意到从 按钮元素。代码运行良好。
4. 我尝试切换浏览器，但结果还是一样（在 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>

Answer 1

您的代码有两个问题：

1. 您不会停止表单提交，因此您看不到任何变化，因为页面发生了变化。

2. 您需要在更改文本后添加加载器，否则文本将删除加载器。

我做了什么？

删除内联 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>

Answer 2

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

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