如何将HTML元素的文本设置为表单文本提交？

Question

I'm creating a basketball scoring app and I would like the team names to be custom so I created a form so you could submit new names. However, when I click the submit button nothing happens but a white flicker on the page. I am just opening the file inside of chrome from my file manager.

Here is what I need to rename:

<span class="teamname" id="1">Team 1</span>

Here is the form that I have:

 <form id="myForm">
<input id="name1" maxlength="6" type="text">
<button type="submit" onclick="updateFunction()">Update Team Names</button>
</form>

Finally, here is my JavaScript:

function updateFunction() {
var newname1 = document.getElementById("myForm").elements.namedItem("name1").value;
document.getElementById('1').innerHTML = newname1;
}

Answer 1

HTML forms expect an action attribute that signifies where the form data should be sent, eg

<form action="/login"></form>

HTML5 doesn't require you to specify the action , but not specifying it defaults to the same page you are on. So in your case submitting the form basically reloads the page. To block that behaviour, you can use a falsy javascript value .

It's also better form to set the submission logic in the form element, not the submit button.

So here's how you should change your code:

<form id="myForm" action="javascript:void(0)" onsubmit="updateFunction()">
    <input id="name1" maxlength="6" type="text">
    <button type="submit">Update Team Names</button>
</form>

Answer 2

The button tag should be located outside the HTML form. So, the form should look like:

 <form id="myForm">
 <input id="name1" maxlength="6" type="text">
 </form>
 <button type="submit" onclick="updateFunction()">Update Team Names</button>