Every time I update the value of a textarea, it's overwritten for some reason with the default value

I'll be honest. I'm a teacher at a school in Japan, and I don't really have much of a programming background. I'm dabbling more than anything else, but I thought it might be fun to try to make an English name generator that the kids could use for an activity. The program works just fine if I have it return the result a开发者_开发百科s an alert, but what I really want to do is update the value of the textarea so that it reflects the generated name rather than "Your Name Here". I've been pouring over forums for hours and don't quite understand why what I have doesn't work as many of the solutions I've seen for dynamically changing a textarea value all offer the same advice, which is to change it as follows.

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

Warning: Hand-coded and probably wrought with errors.

<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>

And here's the accompanying 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>

---

The problem is that your button is type="submit". If you change that to type="button", it will work. A submit button submits the page, in this case back to the same page, but it has the result of resetting to the default value.

---

It looks like your problem is that you have var x=getElementById('id for textarea") you should have var x= document.getElementById("id for textarea");

Also, its not .value its .innerHTML.

So that first snippet should be

function someFunction()
{
    var x = document.getElementById("id for textarea")
    x.value = "new value" //per @Tomalak's comment
}

+1 - for just dabbling in it its pretty good!