jAuery selection button - javascript

I have table like this
And I need do selection 7 buttons and more. with min and max.
Like type="checkbox" or type="radio" but with type="button" (to do style button with css/css3)
<div class="button">
<table>
<tr>
<td>
<input type="button" id="button1" name="1" value="01" />
<input type="button" id="button1" name="2" value="02" />
<input type="button" id="button1" name="3" value="03" />
<input type="button" id="button1" name="4" value="04" />
<input type="button" id="button1" name="5" value="05" />
<input type="button" id="button1" name="6" value="06" />
<input type="button" id="button1" name="7" value="07" />
<input type="button" id="button1" name="8" value="08" />
<input type="button" id="button1" name="9" value="09" />
<input type="button" id="button1" name="10" value="10" />
</td>
</tr>
<tr>
<td>
<input type="button" id="button1" name="11" value="11" />
<input type="button" id="button1" name="12" value="12" />
<input type="button" id="button1" name="13" value="13" />
<input type="button" id="button1" name="14" value="14" />
<input type="button" id="button1" name="15" value="15" />
<input type="button" id="button1" name="16" value="16" />
<input type="button" id="button1" name="17" value="17" />
<input type="button" id="button1" name="18" value="18" />
<input type="button" id="button1" name="19" value="19" />
<input type="button" id="button1" name="20" value="20" />
</td>
</tr>
<tr>
<td>
<input type="button" id="button1" name="21" value="21" />
<input type="button" id="button1" name="22" value="22" />
<input type="button" id="button1" name="23" value="23" />
<input type="button" id="button1" name="24" value="24" />
<input type="button" id="button1" name="25" value="25" />
<input type="button" id="button1" name="26" value="26" />
<input type="button" id="button1" name="27" value="27" />
<input type="button" id="button1" name="28" value="28" />
<input type="button" id="button1" name="29" value="29" />
<input type="button" id="button1" name="30" value="30" />
</td>
</tr>
<tr>
<td>
<input type="button" id="button1" name="31" value="31" />
<input type="button" id="button1" name="32" value="32" />
<input type="button" id="button1" name="33" value="33" />
<input type="button" id="button1" name="34" value="34" />
<input type="button" id="button1" name="35" value="35" />
<input type="button" id="button1" name="36" value="36" />
<input type="button" id="button1" name="37" value="37" />
<input type="button" id="button1" name="38" value="38" />
<input type="button" id="button1" name="39" value="39" />
<input type="button" id="button1" name="40" value="40" />
</td>
</tr>
<tr>
<td>
<input type="button" id="button1" name="41" value="41" />
<input type="button" id="button1" name="42" value="42" />
<input type="button" id="button1" name="43" value="43" />
<input type="button" id="button1" name="44" value="44" />
<input type="button" id="button1" name="45" value="45" />
<input type="button" id="button1" name="46" value="46" />
<input type="button" id="button1" name="47" value="47" />
<input type="button" id="button1" name="48" value="48" />
<input type="button" id="button1" name="49" value="49" />
<input type="button" id="button1" name="50" value="50" />
</td>
</tr>
<tr>
<td>
<input type="button" id="button1" name="51" value="51" />
<input type="button" id="button1" name="52" value="52" />
<input type="button" id="button1" name="53" value="53" />
<input type="button" id="button1" name="54" value="54" />
<input type="button" id="button1" name="55" value="55" />
<input type="button" id="button1" name="56" value="56" />
<input type="button" id="button1" name="57" value="57" />
<input type="button" id="button1" name="58" value="58" />
<input type="button" id="button1" name="59" value="59" />
<input type="button" id="button1" name="60" value="60" />
</td>
</tr>
<tr>
<td>
<input type="button" id="button1" name="61" value="61" />
<input type="button" id="button1" name="62" value="62" />
<input type="button" id="button1" name="63" value="63" />
<input type="button" id="button1" name="64" value="64" />
<input type="button" id="button1" name="65" value="65" />
<input type="button" id="button1" name="66" value="66" />
<input type="button" id="button1" name="67" value="67" />
<input type="button" id="button1" name="68" value="68" />
<input type="button" id="button1" name="69" value="69" />
<input type="button" id="button1" name="70" value="70" />
</td>
</tr>
</table>
</div>
Here is example http://jsfiddle.net/n2RAh/ (now i can select only one)


If you want to work with the inputs, use JavaScript not CSS.
With jQuery, you can add "focus" class.
$(".button input[type=button]").click(function () {
$(this).toggleClass("focus");
});
$("#HS").click(function () { // Add an input
var array = []
$(".button input[type=button].focus").each(function () {
array.push($(this).val());
});
console.log(array.join(", "));
});
See : http://jsfiddle.net/Dp8tR/
Old solution :
$("input[type=button]").click(function () {
$(this).toggleClass("focus");
});
See : http://jsfiddle.net/TTL8d/


Use checkbox and style them as you feel like (button). And also style the :checked state.


add class to all buttons for example: "markble".
jQuery:
$( ".markble" ).click(function() {
$( this ).toggleClass( "activ-now" );
});
CSS:
.activ-now {
border-color: black;
border-style: solid;
background: yellow;
}
you can detect all selected by class "activ-now".
demo: http://jsfiddle.net/n2RAh/3/

Related

document.querySelectorAll Weird Behaviour

I have a simple HTML like below and corresponding java script code.
The issue is :
For .clear and .result buttons , two event listeners are getting attached and called
(storeInput as well as their actual listener). Actually , storeInput should not be get called in this case
To debug issue , I commented out below two lines :
//document.querySelector(".clear").addEventListener('click',clear);
//document.querySelector(".result").addEventListener('click',calculate);
So there are no event listeners for .clear and .result buttons
But still , storeInput listener gets called if they are clicked
Question is :
why document.querySelectorAll(".digit") and document.querySelectorAll(".operator") are adding event listeners to .clear and .result buttons as well ?
function storeInput() {
console.log('storeInput');
}
function clear() {
console.log('clear');
}
function calculate() {
console.log('calculate');
}
const digits = document.querySelectorAll(".digit");
digits.forEach(function() {
this.addEventListener('click', storeInput);
});
const operators = document.querySelectorAll(".operator");
operators.forEach(function() {
this.addEventListener('click', storeInput);
})
document.querySelector(".clear").addEventListener('click', clear);
document.querySelector(".result").addEventListener('click', calculate);
<input type="text" />
<br/>
<input type="button" class="digit" value="0" />
<input type="button" class="digit" value="1" />
<input type="button" class="digit" value="2" />
<input type="button" class="digit" value="3" />
<br/>
<input type="button" class="digit" value="4" />
<input type="button" class="digit" value="5" />
<input type="button" class="digit" value="6" />
<input type="button" class="digit" value="7" />
<br/>
<input type="button" class="digit" value="8" />
<input type="button" class="digit" value="9" />
<br/>
<input type="button" class="clear" value="C" />
<br/>
<input type="button" class="operator" value="+" />
<input type="button" class="operator" value="-" />
<input type="button" class="operator" value="/" />
<input type="button" class="operator" value="*" />
<br/>
<input type="button" class="result" value="=" />

In forEach, this has no special meaning, so what you're really doing is attaching those handlers to window, since this defaults to window in loose mode. (You may have seen jQuery code using each; jQuery sets this to each element in an each callback, but forEach doesn't work that way.)
To use the element within the forEach callback, accept the element as a parameter and use that parameter, see *** comments:
function storeInput() {
console.log('storeInput');
}
function clear() {
console.log('clear');
}
function calculate() {
console.log('calculate');
}
const digits = document.querySelectorAll(".digit");
digits.forEach(function(el) { // *** Note the parameter `el`
el.addEventListener('click', storeInput);
// ^ note using the parameter
});
const operators = document.querySelectorAll(".operator");
operators.forEach(function(el) { // *** Note the parameter `el`
el.addEventListener('click', storeInput);
// ^ note using the parameter
})
document.querySelector(".clear").addEventListener('click', clear);
document.querySelector(".result").addEventListener('click', calculate);
<input type="text" />
<br/>
<input type="button" class="digit" value="0" />
<input type="button" class="digit" value="1" />
<input type="button" class="digit" value="2" />
<input type="button" class="digit" value="3" />
<br/>
<input type="button" class="digit" value="4" />
<input type="button" class="digit" value="5" />
<input type="button" class="digit" value="6" />
<input type="button" class="digit" value="7" />
<br/>
<input type="button" class="digit" value="8" />
<input type="button" class="digit" value="9" />
<br/>
<input type="button" class="clear" value="C" />
<br/>
<input type="button" class="operator" value="+" />
<input type="button" class="operator" value="-" />
<input type="button" class="operator" value="/" />
<input type="button" class="operator" value="*" />
<br/>
<input type="button" class="result" value="=" />
Another option is to put a container around the digits, and another container around the operators, and just handle clicks on those containers, using the target property of the event object to see which digit or operator was clicked.
function storeInput(e) {
console.log('storeInput: ' + e.target.value);
}
function clear() {
console.log('clear');
}
function calculate() {
console.log('calculate');
}
document.querySelector(".digits").addEventListener('click', storeInput);
document.querySelector(".operators").addEventListener('click', storeInput);
document.querySelector(".clear").addEventListener('click', clear);
document.querySelector(".result").addEventListener('click', calculate);
<input type="text" />
<div class="digits">
<input type="button" class="digit" value="0" />
<input type="button" class="digit" value="1" />
<input type="button" class="digit" value="2" />
<input type="button" class="digit" value="3" />
<br/>
<input type="button" class="digit" value="4" />
<input type="button" class="digit" value="5" />
<input type="button" class="digit" value="6" />
<input type="button" class="digit" value="7" />
<br/>
<input type="button" class="digit" value="8" />
<input type="button" class="digit" value="9" />
</div>
<input type="button" class="clear" value="C" />
<div class="operators">
<input type="button" class="operator" value="+" />
<input type="button" class="operator" value="-" />
<input type="button" class="operator" value="/" />
<input type="button" class="operator" value="*" />
</div>
<input type="button" class="result" value="=" />

Why is my global variable undefined inside function? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I made var display_val = document.case.display.value; and this variable is called inside function:
run0() {
var display_val = document.case.display.value;
display_val += "0"
queue.push('0')
};
My code doesn't work and the console gives me the following error:
Uncaught TypeError: Cannot read property 'display' of undefinedat
main.js:72
js:72 is var display_val = document.case.display.value;
Full html code
<html>
<head>
<!--Copyright 2019, Aleksa Kovacevic, All rights reserved.-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Online calculators for everything. Some solve problems, some satisfy curiosity." />
<meta name="keywords" content="calculator, mortgage, loan,lease, cooking, math, college tuition, agriculture, finance,fractions,love,scientific, design, health, unit converter, pocket, running, calculators" />
<link rel="icon" href="https://www.apkmirror.com/wp-content/uploads/2017/11/5a0aad10ea5ec.png">
<title id= "Title">Calculator </title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="Notiflix\node_modules\notiflix\dist\notiflix-1.8.0.min.css" />
<script src="Notiflix\node_modules\notiflix\dist\notiflix-aio-1.8.0.js""></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<button type="button" id="Git" onclick="Git()"> GitHub</button>
<div id="wrapper">
<form name="case" > <!--Buttons -->
<input name="display" id="display" placeholder "0" onkeypress="" autofocus readonly>
<input type="button" class="oper" value="(" onclick="runLB()">
<input type="button" class="oper" value=")" onclick="runRB()">
<input type="button" id="back" class="oper" value="CE" onclick="runBack()">
<input type="button" id="divide" class="oper" value="÷" onclick="runDivide()" >
<input type="button" class="digit" value="1" onclick="run1()">
<input type="button" class="digit" value="2" onclick="run2()">
<input type="button" class="digit" value="3" onclick="run3()">
<input type="button" id="multiply" class="oper" value="×" onclick="runMultiply()">
<input type="button" class="digit" value="4" onclick="run4()">
<input type="button" class="digit" value="5" onclick="run5()">
<input type="button" class="digit" value="6" onclick="run6()">
<input type="button" id="minus" class="oper" value="-" onclick="runMinus()" >
<input type="button" class="digit" value="7" onclick="run7()">
<input type="button" class="digit" value="8" onclick="run8()">
<input type="button" class="digit" value="9" onclick="run9()">
<input type="button" id="plus" class="oper" value="+" onclick="runPlus()">
<input type="button" class="digit" value="0" onclick="run0()">
<input type="button" id="comma" class="digit" value="." onclick="runComma()">
<input type="button" id="equal" class="oper" value="=" onclick="runEquals()">
<div id="Cal">
<textarea id ="TE" placeholder="Note"></textarea>
</div>
<div id="newpos">
<!-- button rainbow -->
<button type="button" id="Note" onclick="myFunction()"> Note</button></div>
</form>
<div id="new">
<!--result textarea-->
<textarea id="result" placeholder="History" readonly></textarea>
<button type="button" id="Del" onclick="Del()"> Delete</button>
<button type="button" id="Print" onclick="printTextArea()" > Print</button>
<button type="button" id="FP" onclick="FontP()" >Font +</button>
<button type="button" id="FM" onclick="FontM()" >Font -</button>
<button type="button" id="SaveBtn" onclick="SaveBtn" >Save</button>
</div>
</div>
</body>
Any informations will help me

display_val is a global variable.
To use it inside a function you have to use this.display_val instead of var

Calculator operators and functions not working

This is my code for the calculator:
function clear(val) {
document.getElementById("Input").value = val;
}
function show(val) {
document.getElementById("Input").value += val;
}
<input type="text" id="Input" style="width: 101px">
<br>
<br>
<input type="button" value="C" id="btnC" onclick="" style="width: 105px" onclick="clear()">
<br>
<br>
<input type="button" value="(" id="btn(" style="width: 24px">
<input type="button" value=")" id="btn)" style="width: 24px">
<input type="button" value="←" id="btn←" style="width: 21px">
<br>
<br>
<input type="button" value="7" id="btn7" onclick="show('7')">
<input type="button" value="8" id="btn8" onclick="show('8')">
<input type="button" value="9" id="btn9" onclick="show('9')">
<input type="button" value="×" id="btn×" style="width: 24px">
<br>
<br>
<input type="button" value="4" id="btn4" onclick="show('4')">
<input type="button" value="5" id="btn5" onclick="show('5')">
<input type="button" value="6" id="btn6" onclick="show('6')">
<input type="button" value="÷" id="btn÷" style="width: 23px" onclick="show('÷')">
<br>
<br>
<input type="button" value="+" id="btn+" onclick="show('+')">
<input type="button" value="1" id="btn1" onclick="show('1')">
<input type="button" value="2" id="btn2" onclick="show('2')">
<input type="button" value="3" id="btn3" onclick="show('3')">
<input type="button" value="-" id="btn-" style="width: 24px" onclick="show('-')">
<br>
<br>
<input type="button" value="0" id="btn0" onclick="show('0')">
<input type="button" value="." id="btn." onclick="show('.')">
<input type="button" value="+/−" id="btn+/−" style="width: 24px" onclick="show('-')">
<input type="button" value="=" id="btn=" style="width: 24px" onclick="">
<br>
<br>
As you might have noticed, none of the operators work at the moment. I am working on the functions but i do not know the code for the operators or functions. Any suggestions? Even some seed code would be useful. Thanks!

You can use eval() to evaluate the value of the Calculator's input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="Input" style="width: 101px">
<br>
<br>
<input type="button" onClick="clearCalc()" value="C" id="btnC" style="width: 105px">
<br>
<br>
<input type="button" value="(" id="btn(" style="width: 24px">
<input type="button" value=")" id="btn)" style="width: 24px">
<input type="button" value="←" id="btn←" style="width: 21px" onClick="del()">
<br>
<br>
<input type="button" value="7" id="btn7" onclick="show('7')">
<input type="button" value="8" id="btn8" onclick="show('8')">
<input type="button" value="9" id="btn9" onclick="show('9')">
<input type="button" value="×" id="btn×" style="width: 24px" onclick="show('*')">
<br>
<br>
<input type="button" value="4" id="btn4" onclick="show('4')">
<input type="button" value="5" id="btn5" onclick="show('5')">
<input type="button" value="6" id="btn6" onclick="show('6')">
<input type="button" value="÷" id="btn÷" style="width: 23px" onclick="show('÷')">
<br>
<br>
<input type="button" value="+" id="btn+" onclick="show('+')">
<input type="button" value="1" id="btn1" onclick="show('1')">
<input type="button" value="2" id="btn2" onclick="show('2')">
<input type="button" value="3" id="btn3" onclick="show('3')">
<input type="button" value="-" id="btn-" style="width: 24px" onclick="show('-')">
<br>
<br>
<input type="button" value="0" id="btn0" onclick="show('0')">
<input type="button" value="." id="btn." onclick="show('.')">
<input type="button" value="+/−" id="btn+/−" style="width: 24px" onclick="show('-')">
<input type="button" value="=" id="btn=" style="width: 24px" onclick="evaluateCalc()">
<br>
<br>
<script>
function clearCalc() {
document.getElementById("Input").value = "";
}
function show(val) {
document.getElementById("Input").value += val;
}
function evaluateCalc(){
try{
var exp = document.getElementById("Input").value; document.getElementById("Input").value = eval(exp);
} catch(err){
//invalid mathematical input
}
}
function del(){
var input = document.getElementById("Input").value;
document.getElementById("Input").value = input.substring(0, input.length-1);
}
</script>

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>

Writing numeric words with onkeypress

How can I write numeric numbers into an input field by pressing a button?
Suppose I have a button:
<input type="button" value="1">
Then I want, that when numeric pad button 1 is pressed it adds numeric words just like Windows Calculator.

I'm not sure what you are asking, but this code will add numbers to an input box (using jQuery).
HTML
<input id="data" type="text" />
<br />
<br />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" /><br />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" /><br />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
Script
$(document).ready(function(){
$(':button').click(function(){
$('#data').val( $('#data').val() + $(this).val() );
})
})

Categories

Resources