Javascript/HTML-隐藏DIV直到单击按钮

我想在单击按钮之前隐藏div状态。如何在js中实现这一点

函数startal{ var bar=document.getElementById'progressBar'； var status=document.getElementById'status'； status.innerHTML=al+%； bar.value=al； al++； var sim=setTimeoutstart+al+，1； 如果al==5500{ status.innerHTML=100%； bar.value=5500； clearTimeoutsim； var finalMessage=document.getElementById'finalMessage'； finalMessage.innerHTML=流程已完成； } } 正在生成事件。。。 提交 最初隐藏状态类。 按下按钮后，使用JavaScript取消隐藏状态类 代码中的一些改进：

尽量避免类和id具有相同的名称。 在代码中，状态是class和id

我已经在下面的代码中将其更改为进度条状态

finalMessage未在HTML中用作ID，因此添加到标记中 注意：现在不推荐使用标记，将来许多浏览器可能不支持它

使用.disabled属性，我们可以在用户按下按钮一次时禁用该按钮，这样用户就不能再次按下该按钮。 函数startal{ document.querySelector.btn.disabled=true； document.querySelector.status.style.display=block； var bar=document.getElementById'progressBar'； var status=document.getElementById'status-of-progress-bar'； status.innerHTML=al+%； bar.value=al； al++； var sim=setTimeoutstart+al+，1； 如果al==5500{ status.innerHTML=100%； bar.value=5500； clearTimeoutsim； var finalMessage=document.getElementById'finalMessage'； finalMessage.innerHTML=流程已完成； } } .地位{ 显示：无； } 正在生成事件。。。

---

Submit您需要使用CSS，以将可见性默认为隐藏。然后，使用JS使div可见

函数startal{ var bar=document.getElementById'progressBar'； var status=document.getElementById'status'； status.innerHTML=al+%； bar.value=al； al++； var sim=setTimeoutstart+al+，1； 如果al==5500{ status.innerHTML=100%； bar.value=5500； clearTimeoutsim； var finalMessage=document.getElementById'finalMessage'； finalMessage.innerHTML=流程已完成； } } 设btn=document.querySelector.btn btn.addEventListenerclick，函数显示{ 开始0；document.querySelector.status.style.visibility=可见； btn.removeEventListener单击，显示； }，{once:true}； .地位{ 可见性：隐藏； } 正在生成事件。。。

---

提交在javascript函数中添加行

功能启动{ document.getElementsByClassNamestatus[0]。style.display=block ...... } 在html中添加样式

.....

---

无需使用内联样式或为任务创建自己的CSS类。任何HTML元素都有一个同步，每个浏览器都有如下用户代理默认样式：

[hidden] { display: none; }

document.addEventListener'DOMContentLoaded'，=>{ document.querySelector'button.btn.btn成功' .addEventListener'单击'，=>开始0； } 函数startal{ document.querySelector'div.status'.hidden=false； const bar=document.getElementById'progressBar'； const status=document.getElementById'status'； status.textContent=al+%； bar.value=al； al++； const sim=setTimeout=>startal，1； 如果al==5500{ status.textContent=100%； bar.value=5500； clearTimeoutsim； document.getElementById'finalMessage'.textContent=流程已完成； } } .btn.btn-success{ 显示：块； 利润率：20px自动0； 宽度：适合的内容； } 进度条{ 宽度：100%； } 正在生成事件。。。

---

提交将默认样式输出为-display:none，然后在内部开始将其更改为display:block请检查我的答案以了解大量的“不做这个做那个”信息。所有的建议都是基于常见的最佳实践。我还修复了一个bug，在这个bug中，当再次单击按钮时，进度会重新开始感谢您的详细解释，非常感谢您没有必要使用内联样式来完成此任务。DOM API具有与此完全对应的隐藏属性/属性。@卢克：代码中有一个bug。如果您再次按“提交”按钮，进度条会出错。@TechySharnav感谢您指出错误，我已经修复了它。

document.querySelector(".status").style.display = "block";

[hidden] { display: none; }