Multiple buttons to input into its own text box on same page,
Question
<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>
Hi all, I have 2 button sets, "1, 2, 3" and "a, b, c". Having trouble trying separate the inputs to there own text boxes on the same page any ideas?. Tried a few things here and there like changing "value" "name" etc. Fairly new at this. Thanks for your help....
4 answers
solution1
0 ACCPTED 2013-04-22 12:51:10
You have to do these things
1) Never have same ID's on the same page they should be different.
This attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS)
more here .
2) Never have same name for two functions.
3) Your <body> tag should be closed before <html> tag.
<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>
solution2
0 2013-04-22 12:53:43
Dont use same id's in same page for component and function name as well.
The second function will be overwritten on first function (Which means first function will be discarded, it will work).
<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>
solution3
0 2013-04-22 13:09:53
JJPA has highlighted the problems you have with your HTML and javascript the only thing i'd add is that you can create one function to do both jobs by making them reusable. This is more efficient and reduces the amount of code you need.
Something like this
moveNumbers(num, element){
var txt=document.getElementById(element).value;
txt=txt + num;
document.getElementById(element).value=txt;
}
and then you call the function like this
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">
solution4
-1 2013-04-22 12:49:34
Use spacs inbetween ur tags like this:
<input type="button" value="a" name="no" onclick="moveNumbers(this.value)">
</input>
<input type="button" value="b" name="no" onclick="moveNumbers(this.value)">
</input>
<input type="button" value="c" name="no" onclick="moveNumbers(this.value)">
Also u can have more buttons, once if any one is clicked its value get posted.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.