Question

我在主页上有一个按钮，单击后会打开一个模式。我在模态中有一个带有按钮的表单，在提交时，它会关闭模态并返回到主页。关闭模态为纯文本后，我想更改主页上的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'

Answer 1

您正在使用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>

Answer 2

您可以执行以下操作，将按钮替换为包含文本的div。

var mainButton = document.getElementById('mainButton');
var buttonText = mainButton.textContent;

var newDiv = document.createElement('div');
newDiv.textContent = buttonText;

document.body.removeChild(mainButton);
document.body.appendChild(newDiv);

提交表单后，用文本替换html按钮元素

2 个答案: