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

Question

我有一个在提交时调用函数 'activate_loading' 的简单表单。 'activate_loading' 包含两行代码以显示加载微调器并将提交按钮的文本更改为 'Please wait':

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

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

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

将按钮的 innerText 更改为 'Please Wait' 而不是 'Submit'

每一行单独使用都可以正常工作，但放在一起时，加载微调器的显示不会从 display:none 更改为显示：块。好像行

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

原因

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

不工作。

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

您的代码有两个问题：

您没有停止表单提交，因此您看不到任何因页面更改而发生的变化。
您需要在更改文本后添加加载器，否则文本将删除加载器。

我做了什么？

删除内联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时，你可以在文本元素上而不是整个按钮上使用它。

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

document.getElementById().style.display = "block" doesnt work in same function as document.getElementById().innerText

html

javascript

forms

getelementbyid

onsubmit