Why can't I use onsubmit to change innerHTML?

I need to use form fields in a translator of the English / amino acid code. The code below is simplified to show the problem I am having. I want to change the text using javascript function.

If I use input like: button with onclick, it works.

The submit button with onsubmit in the form changes the text for a split second, and then returns. I need to use the form for my translation program, so how can I make it work?

Extra credit: why does it change for a split second with onsubmit?

<html>
<head>
<script type="text/javascript">
function changeTo(text){
    document.getElementById("p1").innerHTML=text;
}
</script>
</head>
<body>
<h1 style="text-align:center;">Change text in an element</h1>
<!--
<form onsubmit="changeTo('Hello World');">
<input type="submit" />
</form>
-->
<input type="button" onclick="changeTo('Hello World');" />
<p id="p1">text</p>

</body>
</html>
+3
source share
1 answer

, . , , , . :

<form onsubmit="changeTo('Hello World');return false;">
<input type="submit" />
</form>

false .

+2

Source: https://habr.com/ru/post/1793816/


All Articles