textarea теряет информацию после запуска скрипта

Question

Прежде всего, я совершенно новичок в веб-программировании на стороне клиента.Вот упрощенная версия кода, с которым я работаю.

В первой части сценария я затрагиваю текстовую область с текстом «Почему этот текст остается».Когда пользователь нажимает кнопку отправки формы, я пытаюсь изменить текстовую область с помощью «Some Other Text \ n».Но в конце сценария первый текст всегда возвращается, и я не знаю почему.На самом деле il выглядит так, будто страница перезагружается в конце функции GetRandomNumber().

<div>
    <form>
        Number of roll: <input type="number" id="numberOfRoll" value="1"><br>
        <input type="submit" value="Get random value" onclick="GetRandomNumber()">
    </form>
</div> 
<div>
    <textarea cols="80" rows=20 id="resultArea"></textarea>
</div>
<script>
    initResultArea();
    function initResultArea() {
        document.getElementById("resultArea").innerHTML="Why is this text staying";
    };
    function GetRandomNumber() {
        var output="SomeOtherText\n";
        document.getElementById("resultArea").innerHTML=output;
    };
</script>

Answer 1

Измените тип кнопки на button, а не submit

<div>
<form>
    Number of roll: <input type="number" id="numberOfRoll" value="1"><br>
    <input type="submit" value="Get random value" onclick="GetRandomNumber()">
</form>
</div> 
<div>
    <textarea cols="80" rows=20 id="resultArea"></textarea>
</div>
<script>
    initResultArea();
    function initResultArea() {
        document.getElementById("resultArea").innerHTML="Why is this text staying";
    };
    function GetRandomNumber() {
        var output="SomeOtherText\n";
        document.getElementById("resultArea").innerHTML=output;
    };
</script>

Поскольку он был установлен на submit, каждый раз, когда вы нажимаете кнопку, браузер пытается отправить вашу форму на веб-страницу (которая не была определена). Он делает это в дополнение к вызову вашей функции, поэтому страница перезагружается.

Answer 2

Вы должны изменить тип на кнопку type="button", вместо того, чтобы отправить, это перенаправит страницу.

Другой способ может использовать форму отправки вместо кнопок onclick <form action="#" onsubmit="return GetRandomNumber()"> и return false на GetRandomNumber()

initResultArea();
    function initResultArea() {
        document.getElementById("resultArea").innerHTML="Why is this text staying";
    };
    function GetRandomNumber() {
        var output="SomeOtherText\n";
        document.getElementById("resultArea").innerHTML=output;
        return false;
    };

<div>
<form action="#" onsubmit="return GetRandomNumber()">
    Number of roll: <input type="number" id="numberOfRoll" value="1"><br>
    <input type="submit" value="Get random value">
</form>
</div> 
<div>
    <textarea cols="80" rows=20 id="resultArea"></textarea>
</div>