【问题标题】:Every time I update the value of a textarea, it's overwritten for some reason with the default value每次我更新 textarea 的值时,由于某种原因,它会被默认值覆盖
【发布时间】:2011-08-11 08:23:51
【问题描述】:

我会说实话。我是日本一所学校的老师,我并没有太多的编程背景。我涉猎比其他任何事情都多,但我认为尝试制作一个孩子们可以用于活动的英文名称生成器可能会很有趣。如果我让它将结果作为警报返回,该程序就可以正常工作,但我真正想做的是更新 textarea 的值,以便它反映生成的名称而不是“您的姓名”。我已经在论坛上倾注了几个小时,并且不太明白为什么我所拥有的东西不起作用,因为我看到的许多用于动态更改 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>

【问题讨论】:

  • +1 因为你很诚实 :)

标签: javascript html onclick textarea


【解决方案1】:

问题是您的按钮是type="submit"。如果将其更改为type="button",它将起作用。提交按钮提交页面,在这种情况下返回到同一页面,但它的结果是重置为默认值。

【讨论】:

  • 这正是我所需要的。非常感谢。
  • 太棒了...(顺便说一句,我以前在中国教英语,现在还住在中国)。仅供参考,JavaScript 有另一种更简单的数组语法(数组文字),所以你可以这样做,例如,var girlNames = ["Alice", "Beth", ..etc... ];
【解决方案2】:

看起来你的问题是你有var x=getElementById('id for textarea")你应该有var x= document.getElementById("id for textarea");

另外,它不是.value 而是.innerHTML

所以第一个 sn-p 应该是

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

+1 - 只是涉足它非常好!

【讨论】:

  • 他的第一个代码 sn-p 是关于建议的伪代码。你是对的,它包含提到的语法错误,但他实际使用的代码在第二个 sn-p 中,并且不包含这个错误。因此,这不太可能是问题。
  • @Tomalak Geret'kal 是的,但从问题标题看来,他的问题出在第一个 sn-p 上,因为他说警报版本工作正常。
  • @chromedude:他尝试的代码在第二个 sn-p 中被注释掉了。还有.value is preferred.
  • 问题现已修复。非常感谢您的帮助。
  • @Steve 没问题...不过我帮不上什么忙。
猜你喜欢
  • 1970-01-01
  • 2020-11-28
  • 1970-01-01
  • 1970-01-01
  • 2021-03-26
  • 2021-04-13
  • 1970-01-01
  • 1970-01-01
  • 2020-07-28
相关资源
最近更新 更多