我在主页上有一个按钮，点击它会打开一个模式。我在模式中有一个带有按钮的表单，在提交时关闭模式并返回到主页。我想在关闭模式后将主页上的 html 按钮更改为纯文本。模式关闭后如何替换主页面中的主按钮？
function submitForm() {
alert('yes');
var button = document.getElementById('mainButton');
button.style.display = 'none';
}<body>
<button id="mainButton"> Click here </button>
<div class="modal">
<form onsubmit="submitForm()">
<input type="text">
<button> Done </button>
</form>
</div>
</body>我在 submitForm 函数中尝试了以下操作:
像这样删除按钮:
document.getElementById('mainButton').innerHTML = '';
还试过: document.getElementById('mainButton').style.display = 'none'
最佳答案
您正在使用 submit按钮(这是您使用 <button> 获得的默认按钮类型)。所以，当你点击它时，onsubmit事件处理程序触发并提交表单，这会导致当前页面被卸载，因此尝试显示其他任何内容都行不通。
在这种情况下，您需要将表单重定向到另一个包含您想要的内容的页面(这是通过配置 form 元素的 action 属性完成的。
如果您真的不需要向服务器提交数据，那么您可以将按钮的类型更改为常规的 button并更改事件处理程序以仅处理 click事件，然后将您已经在做的事情提升到一个新的水平。
除了用 display:none 隐藏您不想再看到的内容之外, 你可以显示一些提前设置的并且默认为 display:none 的东西然后将其更改为 display:block什么时候展示它。
function submitForm() {
alert('yes');
var button = document.getElementById('mainButton');
button.style.display = 'none';
// Remove the class that hides the element that you want to now see
document.querySelector(".afterClick").classList.remove("afterClick");
}.afterClick { display:none; } /* Defaults to hidden */<body>
<button id="mainButton"> Click here </button>
<div class="afterClick">Thanks!</div>
<div class="modal">
<form onclick="submitForm()">
<input type="text">
<button type="button"> Done </button>
</form>
</div>
</body>关于javascript - 提交表单后用文本替换 html 按钮元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51952956/