如何解决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
时,您可以在文本元素而不是整个按钮上使用它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。