运行脚本后 textarea 丢失信息答案

【问题标题】：textarea loses information after a script is ran运行脚本后 textarea 丢失信息
【发布时间】：2023-03-04 03:13:01
【问题描述】：

首先，我对客户端 Web 编程完全陌生。这是我正在使用的代码的简化版本。

在脚本的第一部分，我用文本“为什么这个文本保留”影响了一个文本区域。当用户单击表单的提交按钮时，我尝试使用“Some Other Text\n”更改文本区域。但是脚本的结尾，第一个文本总是回来，我不知道为什么。实际上，在 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>

【问题讨论】：

标签： javascript html forms textarea

【解决方案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，所以每次您按下按钮时，浏览器都会尝试将您的表单提交到网页（尚未定义）。除了调用您的函数之外，它还在执行此操作，因此页面正在重新加载。

【讨论】：

【解决方案2】：

您应该将类型更改为按钮type="button"，而不是提交它会重定向页面。

另一种方法可以使用 onsubmit 表单而不是 onclick 按钮 <form action="#" onsubmit="return GetRandomNumber()"> 和 return false on 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>

【讨论】：