Каждый раз, когда я обновляю значение текстовой области, оно почему-то перезаписывается значением по умолчанию

Question

Я буду честен. Я учитель в школе в Японии, и у меня нет большого опыта программирования. Я балуюсь больше всего на свете, но я подумал, что было бы забавно попытаться создать генератор английского имени, который дети могли бы использовать для деятельности. Программа работает просто отлично, если мне нужно вернуть результат в виде предупреждения, но я действительно хочу обновить значение текстовой области, чтобы оно отражало сгенерированное имя, а не «Ваше имя здесь». Я часами поливал форумы и не совсем понимаю, почему то, что у меня есть, не работает, поскольку многие из решений, которые я видел для динамического изменения значения textarea, предлагают один и тот же совет, а именно: следующим образом.

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", оно будет работать.Кнопка отправки отправляет страницу, в данном случае обратно на ту же страницу, но в результате она сбрасывается до значения по умолчанию.

Answer 2

Похоже, ваша проблема в том, что у вас есть var x=getElementById('id for textarea") у вас должно быть var x= document.getElementById("id for textarea");

Кроме того, это не .value это .innerHTML.

Так что первый фрагмент должен быть

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

+ 1 - просто хорошенько побаловать себя!