按钮点击功能不会设置选项卡标题（剂量仅为一秒钟）

Question

<form>

<p>Enter Title Text:</p>

<input type="text">

<button onclick="hello()">Submit</button>

</form>

</body>

<script>

function hello() {

  document.querySelector("title").textContent =

  document.querySelector("input").value;

}

我的目的是让选项卡标题更改为用户在单击按钮时输入的文本。我认为它正在起作用，但只是在一瞬间，然后又变回来了。任何帮助都非常感谢。谢谢！

Answer 1

这是解决方案：-<form onsubmit="event.preventDefault()">&nbsp; <p>Enter Title Text:</p>&nbsp; <div class="title"></div>&nbsp; <input type="text">&nbsp; <button onclick="hello()">Submit</button></form>function hello() {&nbsp; document.querySelector(".title").innerHTML =&nbsp; document.querySelector("input").value;}首先，您需要通过使用 preventDefault 来防止表单的默认行为，或者只是省略表单标记，它在两种情况下的工作方式相同，以便使用按钮的“onclick”事件 然后，为了获得所需的结果，您可以使用innerHTML，就像我在这里使用的那样。

Answer 2

将按钮的类型更改为“按钮”，因此单击它不会提交表单。表单中按钮的默认类型是“提交”，这将导致它提交表单，从而在单击页面时重新加载页面。显式设置类型可防止此行为。请参见：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button<button type="button" onclick="hello()">Submit</button>function hello() {&nbsp; document.querySelector("#result").textContent = "Title text is: " + document.querySelector("input").value;}<form><p>Enter Title Text:</p><input type="text"><button type="button" onclick="hello()">Submit</button></form><p id="result"></p>