logo标签列表

点击按钮在Javascript中填充文本框

javascripthtml
6
我正在尝试通过单击表单按钮来填充文本框。以下是我目前的代码-这段代码是从一个选择框示例修改而来的-
<!DOCTYPE html>
<html>

<head>
    <script>
        function moveNumbers(){
            var no=document.getElementById("no");
            var txt=document.getElementById("result").value;
            txt=txt + option;
            document.getElementById("result").value=txt;
        }
    </script>
</head>

<body>
    <form>
        Select numbers:<br>
        <input type="button" value="1" name="no" onclick="moveNumbers()"> 
        <input type="button" value="2" name="no" onclick="moveNumbers()"> 
        <input type="button" value="3" name="no" onclick="moveNumbers()"> 

        <input type="text" id="result" size="20">
    </form>
</body>

</html>
2
document.getElementById("no") 需要一个元素具有 ID 属性设置为 "no"。你没有这个。另外，你的函数中的 option 是什么？ - j08691
"no" 不是 ID，它是名称。我认为你想要这个：document.getElementsByName("no")[0].value - Flat Cat
2个回答
7
这里有一些缺陷。似乎没有定义option。而且您无法检索实际点击的按钮。
您可以将this.value传递给您的onclick事件处理程序。这会传递您按下的按钮的值，并将其用于追加到文本框值中。
<script> function moveNumbers(num) {
    var txt=document.getElementById("result").value;
    txt=txt + num;
    document.getElementById("result").value=txt;
    }
</script>
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">  
<input type="text" id="result" size="20">

http://jsfiddle.net/cMN44/

1

假设您希望将按钮的值插入文本框：

<!DOCTYPE html>
<html>

<head>
    <script>
        function moveNumbers(number){
            document.getElementById("result").value=number;
        }
    </script>
</head>

<body>
    <form>
        Select numbers:<br>
        <input type="button" value="1" name="no" onclick="moveNumbers(this.value)"> 
        <input type="button" value="2" name="no" onclick="moveNumbers(this.value)"> 
        <input type="button" value="3" name="no" onclick="moveNumbers(this.value)"> 

        <input type="text" id="result" size="20">
    </form>
</body>

</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接