Javascript:我无法获得一个文本框来显示客户端更新的值

Javascript: I cant get a textbox to display a value updated on the client side

本文关键字：文本 一个 显示 客户端 更新 Javascript      更新时间：2024-04-19

我只是想让一个按钮更新HTML文本框的内容（在客户端）。单击该按钮可以很好地触发updateBox（）方法。通过代码，我可以看到text1.value字段更新得很好，但text1似乎没有通过更改dom来更新。

我错误地认为你只能通过修改dom数据来在客户端进行更新吗？

<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox" >clickme!</button>
<script type="text/javascript" >
    var text1 = document.getElementsByName('text1');
    function updateBox() {
        //text1.value = "22"; <----tried this way, no good either :(
        text1.innerHTML = "99";
    }
</script>

很少有东西：

  • onclick="updateBox"应为onclick="updateBox()"
  • var text1 = document.getElementsByName('text1');应为var text1 = document.getElementsByName('text1')[0];（注意[0]）
  • text1.value = "22";是要使用的

jsFiddle示例

尝试使用下面的

var text1 = document.getElementsByName('text1')[0];
function updateBox() {       
    text1.value= "99";
}

参考编号：https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName

感谢大家的回复。根据你的建议，我得到了更新的按钮。我很感激您关于如何正确实现该功能的建议。这只是一个测试，所以我没有太在意。

1） 我不得不在按钮HTML中使用：onclick="updateBox"而不是"updateBox（

2） 非常感谢您指出我引用的是一个集合，而不是集合中的某个项目。必须使用：var tb1=document.getElementsByName（'tb1'）[0]；

3） 由于某种原因，当我使用时，框不会更新：tb1.innerHTML="99"；这起到了作用：tb1.value="99"；

text1[0]。innerHTML="99"

使用innerHTML而不是值

尝试将变量传递给函数，而不是在函数外声明它。

<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox('text1',99)" >clickme!</button>
<script type="text/javascript" >
    function updateBox(t,v) {
        var tv = document.getElementsByName(t)[0];
        tv.value = v;
    }
</script>
相关文章：