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

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()">

  <p>Enter Title Text:</p>

  <div class="title"></div>

  <input type="text">

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

</form>

function hello() {

  document.querySelector(".title").innerHTML =

  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() {

  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>