Develop Reference

I want the value of my button to appear in a textbox upon clicking the button

I am creating an onscreen keyboard, and want a function which will allow when any of the buttons are pressed, for their values to appear in a text box to the side of the keyboard. The code I have so far is:-
<script type="text/javascript">
function onclick(){
document.getElementById("output").value
=document.getElementById("Q").value;
}
</script>
And the HTML code below:-
<div class ="Row">
<div class="Box2">
<form id="keyboard" name="keyboard">
<div>
<input type="button" onclick='onclick' id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input type='text' id='output' />
</div>
</div>
</div>

You have it tagged as jQuery, so here is a more elegant jQuery solution: Throw that code away and use a single delegated jQuery event handler. Start with something like this:
$('[name=keyboard]').on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/kaau601u/
Obviously you need to handle the SPACE and ENTER as special cases, but you gave no clues what you are doing next, so leaving that to the reader to finish :)
Notes:
You either need to place this code after the elements it references or put it in a DOM ready handler.
Like this:
$(function(){
$('[name=keyboard]').on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
});
Or you can use a document attached handler, which is always present:
Like this:
$(document).on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});

//Please try this working example
$('#Q').click(function(){
$('#output').val($(this).val());
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name=keyboard name="keyboard">
<div>
<input type="button" id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input type='text' id='output' />
</div>
</div>

I have made a slight change in the output field type with working SPACE and ENTER
jQuery('form[name="keyboard"] input[type="button"]').click(function(){
var inpVal = jQuery(this).val();
if( inpVal == "SPACE" ){
inpVal = ' ';
}else if( inpVal == "ENTER" ){
inpVal = '\n';
}
var val = jQuery('#output').val() + inpVal;
jQuery('#output').val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name=keyboard name="keyboard">
<div>
<input type="button" onclick='onclick' id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE" >
<input type="button" value="ENTER">
</div>
</form>
<textarea id="output" cols="40" rows="5"></textarea>
</div>
</div>
</div>

This might help
//this this the script that makes it happen...
$('form[name=keyboard]>div>input[type=button]').click(function(){
$('#output').val($(this).val());
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name="keyboard">
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input title="keyboard" type='text' id='output' />
</div>
</div>

Using just javaScript and no need for jQuery.
This example including the use of the SPACE and ENTER keys. As a bonus I added a BACKSPACE key.
Note your output text field was changed to text area to allow for the use of the enter key.
Create a single event listener for the form. This can be done using document query selector.
Capture the click event with the query selector.
Note on the <body> tag we add the onload event handler so when the document is served up the event listener is assigned to the <form> node.
Any click inside the <form> will be tested
HTML and javaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<script type="text/javascript">
var g = {};
function assignListener()
{
/*event listener for keyboard*/
g.keyboard = document.querySelector("#keyboard");
g.keyboard.addEventListener("click", addToTextBox,false);
}
function addToTextBox(e)
{
/*
with query selector the event (e) is passed along
to the function. You can examine the event and get
all kinds of useful stuff from it, like type of event, where it came from, attributes like id, class list etc.
*/
if (e.target.type == 'button')
{
switch (e.target.value)
{
case "ENTER":
document.getElementById('output').value += '\n';
break;
case "SPACE":
document.getElementById('output').value += ' ';
break;
case "BACKSPACE":
document.getElementById('output').value = document.getElementById('output').value.substr(0,document.getElementById('output').value.length-1);
break;
default:
document.getElementById('output').value += e.target.value;
}
}
}
</script>
</head>
<body onload="assignListener();">
<div class ="Row">
<div class="Box2">
<form id=keyboard>
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
<input type="button" value="BACKSPACE">
</div>
</form>
<!-- <input type='text' id='output' /> -->
<textarea id="output" rows="5" cols="75"></textarea>
</div>
</div>
</body>
</html>

How to get instant average of some numbers when I add a new one

I am new at programming and I've tried a lot to find something that could help me with that problem.
<form name="calc">
<input name="rezultat"/>
<input type="button" name="1" value="2" onclick="run2()"/>
<input type="button" name="1" value="3" onclick="run3()"/>
<input type="button" name="1" value="4" onclick="run4()"/>
<input type="button" name="1" value="5" onclick="run5()"/>
<input type="button" name="1" value="6" onclick="run6()"/>
<input type="button" name="1" value="7" onclick="run7()"/>
<input type="button" name="1" value="8" onclick="run8()"/>
<input type="button" name="1" value="9" onclick="run9()"/>
<input type="button" name="1" value="10" onclick="run10()"/>
</form>
This is my HTML code
The idea is to make instant average of the numbers when I add a new one by clicking the specific button (every button has a value and an onclick proprety) and show that in the "rezultat" field.
I would be grateful if you'd help me with a script.

Here you go, most of the explanation is done inline in the comments.
<form id="calc" name="calc">
<input name="rezultat" id="rezultat" />
<input type="button" name="1" value="2" />
<input type="button" name="1" value="3" />
<input type="button" name="1" value="4" />
<input type="button" name="1" value="5" />
<input type="button" name="1" value="6" />
<input type="button" name="1" value="7" />
<input type="button" name="1" value="8" />
<input type="button" name="1" value="9" />
<input type="button" name="1" value="10" />
</form>
<script type="text/javascript">
var count = 0; // global scope variable
var total = 0; // global scope variable
// define your function to calculate a new value
var calc = function(e){
// add value of button clicked to total
total += Number(e.target.value);
// add 1 to the counter
count += 1;
// set rezultat to average (total / count)
document.getElementById('rezultat').value = total / count;
// stop bubbling and default handler
return false;
}
// get array of the buttons in the form
buttons = document.querySelectorAll('#calc input[type=button]');
// loop through the buttons
for(var i=0;i<buttons.length;i++){
// bind a handler for the click event of each button
buttons[i].addEventListener('click',calc,false);
}
</script>

Maxlength not working when using Javascript number inputs

I have a slight problem with inserting numbers in the input box.
To be more specific.I use the custom made keypad that shows on the screen,and the numbers can only be written in the input box by using that same keypad,with the max of 5 numbers that can be written.But the HTML maxlength atrribute in this case doesn't work.It works when I try to write the number using the actual keyboard,but when inserting with a custom keypad it won't work.
The question is how can I make it to work?
<script>
function addNumber(element) {
document.getElementById('child').value = document.getElementById('child').value + element.value;
}
function deleteNumber(){
document.getElementById('child').value='';
}
</script>
<div class='form-group'>
<div id="staticParent">
<div class='col-md-6'>
<input class='form-control' id='child' name="username" type='text' maxlength="5" readonly='readonly' />
<input type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); />
<input type="button" class="fbutton" name="2" value="2" id="2" onClick=addNumber(this); />
<input type="button" class="fbutton" name="3" value="3" id="3" onClick=addNumber(this); />
<input type="button" class="fbutton" name="4" value="4" id="4" onClick=addNumber(this); />
<input type="button" class="fbutton" name="5" value="5" id="5" onClick=addNumber(this); />
<input type="button" class="fbutton" name="6" value="6" id="6" onClick=addNumber(this); />
<input type="button" class="fbutton" name="7" value="7" id="7" onClick=addNumber(this); />
<input type="button" class="fbutton" name="8" value="8" id="8" onClick=addNumber(this); />
<input type="button" class="fbutton" name="9" value="9" id="9" onClick=addNumber(this); />
<input type="button" class="fbutton" name="0" value="0" id="0" onClick=addNumber(this); />
<input type='button' class='fbutton' name='delete' value='Delete' onClick=deleteNumber(this); />
</div>
</div>

you can replace your addNumber function with below one, That will solve your problem.
function addNumber(element) {
var value1 = document.getElementById('child').value + element.value;
if(value1.length > 5) return false;
document.getElementById('child').value = value1;
}

you can try this maxlength=5.you will remove ""
<input class='form-control' id='child' name="username" type='text' maxlength=5 readonly='readonly' />

Since maxlength only works if the user actually uses the real keyboard and not for programatically changing the value, you can't do it like that.
To get around it simply apply a check in your addNumber function:
function addNumber() {
var input = document.getElementById('child');
if (input.value.length > 5) {
return false;
}
else {
// Do stuff
}
}
This won't add a new number unless the input length is less or equal to 5.
Also you shouldn't call things with the onclick attribute. Instead add your event listeners with addEventListener:
var addBtns = document.getElementsByClassName('fbutton');
for (var i = 0; i < addBtns.length; i++) {
addBtns[i].addEventListener('click', addNumber);
}
Note that you have to use a loop to add the event listeners since addBtns is an array.

Multiple buttons to input into its own text box on same page,

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

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>

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>

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

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.

Javascript calculator keeps concatenating calculation results with first number entered for next calculation

<body>
<FORM NAME="Calculator">
<TABLE BORDER=4>
<TR>
<TD>
<input type="text" name="Input" Size="22" value="">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one" VALUE="1" class ="digit" >
<INPUT TYPE="button" NAME="two" VALUE="2" class ="digit" >
<INPUT TYPE="button" NAME="three" VALUE="3" class ="digit" >
<INPUT TYPE="button" NAME="plus" VALUE="+" class ="operand">
<br>
<INPUT TYPE="button" NAME="four" VALUE="4" class ="digit">
<INPUT TYPE="button" NAME="five" VALUE="5" class ="digit">
<INPUT TYPE="button" NAME="six" VALUE="6" class ="digit">
<INPUT TYPE="button" NAME="minus" VALUE="-" class="operand">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="7" class ="digit">
<INPUT TYPE="button" NAME="eight" VALUE="8" class ="digit">
<INPUT TYPE="button" NAME="nine" VALUE="9" class ="digit">
<INPUT TYPE="button" NAME="times" VALUE="*" class ="operand">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="c" class ="special">
<INPUT TYPE="button" NAME="zero" VALUE="0" class ="digit">
<INPUT TYPE="button" NAME="Execute" VALUE="=" class ="solve">
<INPUT TYPE="button" NAME="div" VALUE="/" class ="operand">
<br>
</TD>
</TR>
</TABLE>
</FORM>
<script type = "text/javascript" src="C:\Users\Quonn\Desktop\QBJS\calculatorjs.js">
</script>
</body>
I am building a configurable calculator but I am having some with my logic/getting it to behave exactly how i want. I have two questions.
Question # 1: How can I change my logic so that I can replace "evil eval"?
var timer;
document.onclick = function(x) {
var info = x.target;
clearTimeout(timer);
timer= setTimeout(function(){addDigit(x);},200);
}
Question #2: How can change my logic in this function so that after a calculation result is displayed, the first number entered for the next calculation isn't just concatenated to the previous calculation's result?
function addDigit(x){
if (x.target.className === "digit" || x.target.className ==="operand") {
document.Calculator.Input.value += "" + x.target.value;
}
else if (x.target.className === "solve") {
result = eval(document.Calculator.Input.value);
document.Calculator.Input.value = result;
}
else {
document.Calculator.Input.value = "";
}
}

You are concatenating strings. You should have a look at parseInt / parseFloat; watch out for the radix, otherwise JavaScript will try to guess it...