在同一页面上输入自己的文本框的多个按钮,

时间:2013-04-22 12:45:14

标签: javascript html

<html>
<body>

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

<br>
<br>
<br>

<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="a" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="b" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="c" name="no" onclick="moveNumbers(this.value)"> <input type="text" id="result" size="20">

</html>
</body>

大家好,我有2个按钮组,“1,2,3”和“a,b,c”。难以尝试将输入分离到同一页面上有自己的文本框的任何想法吗?尝试过这里和那里的一些事情,比如改变“价值”“名称”等等。谢谢你的帮助......

4 个答案:

答案 0 :(得分:0)

你必须做这些事

1)在同一页面上永远不要有相同的ID,它们应该是不同的。

  

此属性定义唯一标识符(ID),该标识符必须是唯一的   在整个文件中。其目的是在何时识别元素   链接(使用片段标识符),脚本或样式(使用   CSS)

更多here

2)两个函数永远不会有相同的名称。

3)您的<body>代码应在<html>代码之前关闭。

 <html>
    <body>
    Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers1(this.value)">  
    <input type="button" value="2" name="no" onclick="moveNumbers1(this.value)">  
    <input type="button" value="3" name="no" onclick="moveNumbers1(this.value)">  
    <input type="text" id="result" size="20">

    <br>
    <br>
    <br>
    <script> 
    function moveNumbers2(num) { 
       var txt=document.getElementById("result2").value; 
       txt=txt + num; 
       document.getElementById("result2").value=txt; 
    } 
    function moveNumbers1(num) { 
       var txt=document.getElementById("result").value; 
       txt=txt + num; 
       document.getElementById("result").value=txt; 
    } 
    </script>
    Select numbers: <br> <input type="button" value="a" name="no" onclick="moveNumbers2(this.value)">  
    <input type="button" value="b" name="no" onclick="moveNumbers2(this.value)">  
    <input type="button" value="c" name="no" onclick="moveNumbers2(this.value)"> <input type="text" id="result2" size="20">

    </body>
 </html>

答案 1 :(得分:0)

也不要在组件和功能名称的同一页面中使用相同的ID。

第二个函数将被第一个函数覆盖(这意味着第一个函数将被丢弃,它将起作用)。

<html>
<body>
<script>

function moveNumbers(num) { 
var txt=document.getElementById("result1").value; 
txt=txt + num; 
document.getElementById("result1").value=txt; 
} 

function moveAlpha(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="result1" size="20">
<br>
<br>
<br>
Select numbers: <br> <input type="button" value="a" name="no" onclick="moveAlpha(this.value)">  
<input type="button" value="b" name="no" onclick="moveAlpha(this.value)">  
<input type="button" value="c" name="no" onclick="moveAlpha(this.value)"> <input type="text" id="result" size="20">

</html>
</body>

答案 2 :(得分:0)

JJPA强调了你对HTML和javascript的问题我唯一要补充的是你可以通过使它们可重用来创建一个函数来完成这两个任务。这样更有效,并减少了您需要的代码量。

像这样的东西

moveNumbers(num, element){
  var txt=document.getElementById(element).value; 
  txt=txt + num;
  document.getElementById(element).value=txt; 
}

然后你调用这个函数

Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers1(this.value, "result")">  
<input type="button" value="2" name="no" onclick="moveNumbers1(this.value, "result")">
<input type="button" value="3" name="no" onclick="moveNumbers1(this.value, "result")">  
<input type="text" id="result" size="20">

答案 3 :(得分:-1)

在您的代码之间使用空格,如下所示:

<input type="button" value="a" name="no" onclick="moveNumbers(this.value)"> 
&nbsp;&nbsp; </input>
<input type="button" value="b" name="no" onclick="moveNumbers(this.value)"> 
&nbsp;&nbsp; </input>
<input type="button" value="c" name="no" onclick="moveNumbers(this.value)">

此外,您可以拥有更多按钮,一旦点击任何按钮,其值就会被发布。