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

Question

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

+1 for your being very honest :) – Anji Apr 23 '11 at 04:14 — Anji, Apr 23 '11 at 04:14

score 1 · Accepted Answer · answered Apr 23 '11 at 04:14

1

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.

answered Apr 23 '11 at 04:14

Brett Zamir

14,034
6
54
77

1

Great... (Btw, I used to teach English in and am still living in China). FYI, JavaScript has an alternative simpler syntax for arrays (array literals), so you could just do, for example, `var girlNames = ["Alice", "Beth", ..etc... ];` – Brett Zamir Apr 23 '11 at 04:24

chromedude · Answer 2 · 2011-04-23T04:14:28.217

0

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!

edited Apr 23 '11 at 04:14

answered Apr 23 '11 at 04:07

chromedude

4,246
16
65
96

His first code snippet was pseudo-code about advice. You're right in that it contained the mentioned syntax error, but the code that's he's actually using is in the second snippet, and does not contain this error. Consequently, it's not likely to be the problem. – Lightness Races in Orbit Apr 23 '11 at 04:08
@Tomalak Geret'kal yeah, but from the question title it seems that his problem is with the first snippet because he said that the alert version was working fine. – chromedude Apr 23 '11 at 04:10
@chromedude: The code he tried is commented out inside the second snippet. And [`.value` is preferred](http://stackoverflow.com/questions/5314186/javascript-get-textarea-input-via-value-or-innerhtml). – Lightness Races in Orbit Apr 23 '11 at 04:12
Problem is fixed now. Thank a ton for all of your help. – Steve Apr 23 '11 at 04:15
@Steve no problem... I wasn't very helpful though. – chromedude Apr 23 '11 at 04:21

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

2 Answers2