Question

我正在构建这个非常简单的应用程序，它根据您在文本输入中所写的内容更改H1的innerHTML。

但是当我提交时，页面加载并且输入的人只留在页面中的文本只有几分之一秒。

我确定这是一个新手问题，但我想知道即使在点击提交后，我还应该做些什么来保持H1中的新文字。

HTML：

<body>

<h1 id="numberOutput">Type something</h1>

<form onsubmit="changeNumber()">

    <input type="text" name="numberInput" id="numberInput" value="Digite um número">

    <input type="submit" name="">

</form>

</body>

JS

function changeNumber(){

    //Sets var "text_input" to input value
    text_input = document.getElementById("numberInput").value;

    //Sets H1's innerHTML to be whatever the user typed
    document.getElementById("numberOutput").innerHTML = text_input;
}

var text_input;

Answer 1

原因是因为表格适用于以下两种情况之一：

收集名称/值对并将其提交给某个遥控器源。
创建交互式用户界面。

在您的情况下，您将其用于＃2，这意味着您不应该使用带有<form>按钮且submit按钮的submit元素第一名。

删除<form>包装，只需使用常规按钮及其click事件即可避免表单提交，这就是导致您不想要的效果

此外， don't use inline HTML event attributes ，这是我们在制定标准之前使用的25年以上的技术。相反，请遵循现代最佳实践进行事件配置。

最后，不是在此处设置input元素value，而是最好使用placeholder属性，该属性用于向用户提供有关内容的指导输入应该是，但一旦用户开始提供输入就会消失。

＆＃13;

// Get your DOM element references
let btn = document.getElementById("go");
let input = document.getElementById("numberInput");
let output = document.getElementById("numberOutput");

// Set up your event handlers in JavaScript, not with HTML event attributes
// ... and here, use the click event of the button, instead of the submit event
// of the form

btn.addEventListener("click", changeNumber);

function changeNumber(){
    // Sets H1's innerHTML to be whatever the user typed
    output.textContent = input.value;
}

＆＃13;

<h1 id="numberOutput">Type something</h1>
<input type="text" name="numberInput" id="numberInput" placeholder="Digite um número">
<input type="button" id="go">

＆＃13;

Answer 2

您应该使用preventDefault()事件方法。如果该事件可取消，则此方法取消该事件，这意味着不会发生属于该事件的默认操作。例如，当点击"Submit"按钮时，这可能很有用，可以阻止submitting表单。

function changeNumber( e ){
  e.preventDefault();
  document.getElementById( 'numberOutput' ).innerHTML = document.getElementById( 'numberInput' ).value
}

<h1 id="numberOutput">Type something</h1>
<form onsubmit="changeNumber( event )">
  <input type="text" name="numberInput" id="numberInput" value="Digite um número">
  <input type="submit" name="">
</form>

JavaScript表单提交错误

2 个答案: