javascript - 每次我更新文本区域的值时，由于某种原因它会被默认值覆盖

Question

我会说实话。我是日本一所学校的老师，我并没有太多的编程背景。我的涉猎比其他任何事情都多，但我认为尝试制作一个 children 可以在事件中使用的英文名字生成器可能会很有趣。如果我让它作为警报返回结果，该程序就可以正常工作，但我真正想做的是更新 textarea 的值，以便它反射(reflect)生成的名称而不是“你的名字在这里”。我已经在论坛上浏览了几个小时，但不太明白为什么我所拥有的东西不起作用，因为我看到的许多动态更改文本区域值的解决方案都提供了相同的建议，即将其更改为如下。

function someFunction()
{
    var x=document.getElementById("id for textarea")
    x.value = "new value"
}

警告:手工编码，可能存在错误。

<script type="text/javascript">
    function name_gen()
    {
        var randomNum;
        var form = document.getElementById("nameGenForm");
        var result = document.getElementById("nameSpace");

        var boyNames = new Array("Adam", "Ben", "Cory", "David", "Eric", "Frank", "George",
                                 "Harry", "Isaac", "James", "Kevin", "Lance", "Matthew",
                                 "Nathan", "Patrick", "Quincy", "Ryan", "Sean", "Terrance",
                                 "Vincent", "William", "Xavier", "Zach");

        var girlNames = new Array("Alice", "Beth", "Catherine", "Danielle", "Erika", "Holly",
                                  "Isabelle", "Jenny", "Kristen", "Lisa", "Mary", "Naomi",
                                  "Patricia", "Quinn", "Rhianna", "Sarah", "Tiffany", "Wendy");

        if (form.male.checked == true)
        {
            randomNum = Math.floor(Math.random()*boyNames.length);
            name = boyNames[randomNum];
        }
        else if (form.female.checked == true)
        {
            randomNum = Math.floor(Math.random()*girlNames.length);
            name = girlNames[randomNum];
        }
        else
        {
           alert("Please make a selection.");
           return false;
        }

        alert(name);
        //result.value = name;
    }
</script>

这是随附的 HTML。

<form id="nameGenForm" action="" method="post">
    <fieldset>
        <legend>Random Name Generator</legend>
        <input id="male" name="sex" type="radio" />
        <label for="male">Male</label>
        <input id="female" name="sex" type="radio" />
        <label for="female">Female</label><br />
        <input type="submit" value="Generate" onclick="name_gen();" />
    </fieldset>
</form>
<div id="textArea">
    <textarea rows="1" cols="20" id="nameSpace" readonly>Your Name Here</textarea>
</div>

Answer 1

问题是您的按钮是 type="submit"。如果将其更改为 type="button"，它将起作用。提交按钮提交页面，在本例中返回到同一页面，但它具有重置为默认值的结果。