Maxlength not working when using Javascript number inputs - javascript

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.

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

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>

have a span text that removes commas from multiple input fields

I have the following input fields and I would like to have a link above them that uses pure javascript (ie: no js libraries) that would remove the commas from all of the input fields.
Current:
<span id="remove">click to remove commas</span>
<input type="text" name="1" id="1" value="14,22,25,2,26,1,15,8,23"><br />
<input type="text" name="2" id="2" value="12,25,14,11,5,23,8,15,19"><br />
<input type="text" name="3" id="3" value="25,1,10,2,26,5,19,7,13,22"><br />
<input type="text" name="4" id="4" value="8,1,16,20,19,7,25,2,14,27"><br />
<input type="text" name="5" id="5" value="8,15,6,22,30,21,4,24,31,3">
Wanted Results:
<span id="remove">click to remove commas</span>
<input type="text" name="1" id="1" value="142225226115823"><br />
<input type="text" name="2" id="2" value="1225141152381519"><br />
<input type="text" name="3" id="3" value="2511022651971322"><br />
<input type="text" name="4" id="4" value="8116201972521427"><br />
<input type="text" name="5" id="5" value="8156223021424313">

Fiddle
JavaScript:
var removeSpan = document.querySelector('#remove');
removeSpan.addEventListener('click', function(e){
[].slice.call(document.querySelectorAll('[type="text"]')).forEach(function(text){
text.value = text.value.replace(/,/g, '')
});
});

You can use .replace, like this:
var res = str.replace(",", "");

To replace all occurrence, try
var res=str.replace(/,/g,'');

Set a common name for all the inputs, for example, values. Then add calling of this method to span's onclick event:
function removeCommas() {
var values = document.getElementsByName("values");
for (var i = 0; i < values.length; i++) {
values[i].value = values[i].value.replace(/,/g, '');
}
}
See Fiddle.

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

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