Javascript document.getElementById（）.style.display="；块；与document.getElementById（）.innerText在同一函数中不起作用

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

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

将加载微调器的显示从“显示：无”更改为“显示：块”

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

将按钮的内部文本更改为“请稍候”而不是“提交”

每行本身都可以正常工作，但当组合在一起时，加载微调器的显示不会从display:none更改为display:block。好像那条线

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

原因

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

不工作

我试着换线，结果是一样的 结果

我试过了。style.visibility=“visible”；而不是显示：块-> 同样的结果

我还注意到这是从 按钮元素。代码运行良好

我尝试切换浏览器，但结果还是一样（在chrome和firefox上尝试过）

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

功能激活_加载（）{
document.getElementById（“loader_mini”）.style.display=“block”；
document.getElementById（“submitBtn”）.innerText=“请稍候…”；
}

#加载器#迷你{
宽度：20px；
高度：20px；
边框：2件纯蓝；
边框顶部：2件纯白；
左边框：1px纯白；
边框底部：0px纯白；
边界半径：50%；
-webkit动画：旋转1.2s线性无限；
动画：旋转1.2s线性无限；
显示：无；
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

---

您的代码有两个问题：

您没有停止表单提交，因此无法看到任何更改，因为页面已更改


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


我做了什么

删除内联onchange并直接添加函数（更“优雅”的代码），然后添加
event.preventDefault（）用于停止提交。
下一步是更改元素
innerHTML
的位置（was
innerText
但更改为添加加载器）


form.onsubmit=函数（事件）
{
event.preventDefault（）；
激活_加载（）；
};
函数激活_加载（）{
document.getElementById（“submitBtn”）.innerHTML=“请稍候…”；
document.getElementById（“loader_mini”）.style.display=“block”；
}
#加载器#迷你{
宽度：20px；
高度：20px；
边框：2件纯蓝；
边框顶部：2件纯白；
左边框：1px纯白；
边框底部：0px纯白；
边界半径：50%；
-webkit动画：旋转1.2s线性无限；
动画：旋转1.2s线性无限；
显示：无；
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
.innerText
替换按钮内的所有内容，包括加载程序元素

这就是为什么使用innerText时加载程序会消失。解决方案是在按钮内有两个元素。一个用于文本，一个用于加载程序。因此，当您使用
.innerText
时，可以在文本元素而不是整个按钮上使用它。
使用返回语句onsubmit=“return activate\u loading（）”，然后在执行相同操作后传递true或false。
位于按钮内部。当您编辑按钮的
内部文本
时，它会用
“请稍候…”
（包括
）替换按钮内部的所有内容。感谢您的解释。有道理。我尝试通过添加我的按钮文本来改变span.PS的互文。如果您需要在执行所需操作时提交，只需使用
form.submit（）在第一个函数中，我没有添加事件。preventDefault（）；因为我想要我的表格提交。我希望在页面重新定向（特别是在internet连接不良的情况下）之前加载页面时，微调器和“请稍候…”文本出现，还是按照您提供的event.preventDefault（）方法进行操作更好；然后稍后包括form.submit（）；为了让它像我想要的那样提交？不，没关系，所以：）