We Keep Coding

JavaScript: formatting input method gives wrong values

I'm programming a method in JavaScript/JQuery which converts the value an user enters in an inputbox. The meaning is to make this input regional aware.
The functionality contains removing zeros at the beginning, placing thousand seperators and a decimal separator.
In this use case is the , symbol a thousand separator and the . dot the decimal separator
For example following input gets converted in following output.
12300 => 12,300.00
100 => 100.00
1023.456 => 1,023.456
Now There is still a problem with numbers, less than 100.
For example following input is malformed:
1 => 1,.00
2.05 => .05
20 => 20,.00
25.65 => .65
When I don't enter a decimal value in the input box, I get an unneeded thousand separator. When I enter a decimal value, I lose my content before the decimal separator.
The code:
$("#queryInstructedAmountFrom").change(function(){
var amount = $("#queryInstructedAmountFrom").val();
amount = removeZeros(amount);
var nonFractions = amount.match(/.{1,3}/g);
if(nonFractions == null) {
nonFractions = [];
nonFractions.push(amount);
}
var splittedValues = amount.split(/[,.]/);
amount = "";
if(splittedValues.length == 1) {
amount += splittedValues[0];
nonFractions = amount.match(/.{1,3}/g);
var firstIndex = amount.length % 3;
if(firstIndex != 0) {
var firstNumbers = amount.substr(0, firstIndex);
amount = amount.substr(firstIndex);
nonFractions = amount.match(/.{1,3}/g);
if(nonFractions == null) {
nonFractions = [];
nonFractions.push(amount);
}
amount = "";
amount += firstNumbers;
amount += thousandSeparator;
} else {
amount = "";
}
for(var i=0 ; i < nonFractions.length ; i++) {
amount += nonFractions[i];
if(i < (nonFractions.length - 1) && nonFractions.length != 1){
amount += thousandSeparator;
}
}
amount += decimalSeparator;
amount += "00";
} else {
for(var i=0 ; i < splittedValues.length - 1 ; i++) {
amount += splittedValues[i];
}
nonFractions = amount.match(/.{1,3}/g);
var firstIndex = amount.length % 3;
if(firstIndex == 0) {
nonFractions = amount.match(/.{1,3}/g);
}
if(firstIndex >= 1 && nonFractions != null) {
var firstNumbers = amount.substr(0, firstIndex);
amount = amount.substr(firstIndex);
nonFractions = amount.match(/.{1,3}/g);
if(nonFractions != null) {
amount = "";
amount += firstNumbers;
amount += thousandSeparator;
} else {
nonFractions = [];
nonFractions.push(amount);
}
} else {
amount = "";
}
for(var i=0 ; i < nonFractions.length ; i++) {
amount += nonFractions[i];
if(i < (nonFractions.length - 1) && nonFractions.length != 1){
amount += thousandSeparator;
}
}
amount += decimalSeparator;
amount += splittedValues[splittedValues.length -1];
}
$("#queryInstructedAmountFrom").val(amount);
});
});
function removeZeros(amount) {
while (amount.charAt(0) === '0') {
amount = amount.substr(1);
}
if(amount.length == 0){
amount = "0";
}
return amount;
}
What is going wrong?

What is going wrong?
I'd say almost everything. You have very unclear, messy code, I hardly following your logic, but you have several critical logic mistakes in code, for example:
1
1 is converted to 1,.00 because:
var splittedValues = amount.split(/[,.]/);
creates array with single element ['1']
var firstIndex = amount.length % 3;
1%3 == 1, so you're going into if condition, where amount += thousandSeparator; appends thousand separator, but you should add separator only if you have something after that
2
2.05 is wrong, because it goes into this branch:
var firstNumbers = amount.substr(0, firstIndex); // stores '2' into firstNumbers
amount = amount.substr(firstIndex); // sets amount to empty string
later, nonFractions is null:
nonFractions = [];
nonFractions.push(amount);
but firstNumbers is not used at all, ie its value is lost
3
also, you have:
nonFractions = amount.match(/.{1,3}/g);
var firstIndex = amount.length % 3;
if (firstIndex == 0) {
nonFractions = amount.match(/.{1,3}/g);
}
what is the sense of nonFractions re-init?
probably there are more errors and edge cases where this code fails, I suggest you to use library (like in other answers) or if you want to have your own code, here is simple version you can use:
$(document).ready(function() {
$("#queryInstructedAmountFrom").change(function() {
var val = parseFloat(('0' + $("#queryInstructedAmountFrom").val()).replace(/,/g, '')); // convert original text value into float
val = ('' + (Math.round(val * 100.0) / 100.0)).split('.', 2);
if (val.length < 2) val[1] = '00'; // handle fractional part
else while (val[1].length < 2) val[1] += '0';
var t = 0;
while ((val[0].length - t) > 3) { // append thousand separators
val[0] = val[0].substr(0, val[0].length - t - 3) + ',' + val[0].substr(val[0].length - t - 3);
t += 4;
}
$("#queryInstructedAmountFrom").val(val[0] + '.' + val[1]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="queryInstructedAmountFrom">

Why don't you use jQuery-Mask-Plugin?
<input type="text" id="money" />
and just invoke the plugin:
$('#money').mask('000.000.000.000.000,00', {reverse: true});
Plunker: https://plnkr.co/edit/PY7ihpS3Amtzeya9c6KN?p=preview

Refer to the below code updated.
$(document).ready(function() {
$("#queryInstructedAmountFrom").change(function() {
var amount = $("#queryInstructedAmountFrom").val();
amount = removeZeros(amount);
// format amount using 'ThousandFormattedValue' function
amount = ThousandFormattedValue(amount);
$("#queryInstructedAmountFrom").val(amount);
});
});
function removeZeros(amount) {
while (amount.charAt(0) === '0') {
amount = amount.substr(1);
}
if (amount.length == 0) {
amount = "0";
}
return amount;
}
function ThousandFormattedValue(iValue) {
// declaring variables and initializing the values
var numberArray, integerPart, reversedInteger, IntegerConstruction = "",
lengthOfInteger, iStart = 0;
// splitting number at decimal point by converting the number to string
numberArray = iValue.toString().split(".");
// get the integer part
integerPart = numberArray[0];
// get the length of the number
lengthOfInteger = integerPart.length;
// if no decimal part is present then add 00 after decimal point
if (numberArray[1] === undefined) {
numberArray.push("00");
}
/* split the integer part of number to individual digits and reverse the number
["4" , "3" , "2" , "1"] - after split
["1" , "2" , "3" , "4"] - after reverse
"1234" - after join
*/
reversedInteger = integerPart.split("").reverse().join("");
// loop through the string to add commas in between
while (iStart + 3 < lengthOfInteger) {
// get substring of very 3 digits and add "," at the end
IntegerConstruction += (reversedInteger.substr(iStart, 3) + ",");
// increase counter for next 3 digits
iStart += 3;
}
// after adding the commas add the remaining digits
IntegerConstruction += reversedInteger.substr(iStart, 3);
/* now split the constructed string and reverse the array followed by joining to get the formatted number
["1" , "2" , "3" , "," ,"4"] - after split
["4" , "," , "3" , "2" , "1"] - after reverse
"4,321" - after join
*/
numberArray[0] = IntegerConstruction.split("").reverse().join("");
// return the string as Integer part concatinated with decimal part
return numberArray.join(".");
}

How do I increment a string with numbers?

I need to increment a value similar to this:
A001 becomes A002
A999 becomes B001
B001 becomes B002
etc
Z999 becomes A001
I can increment an integer like this:
var x = 5;
x++;
Yields x = 6
I can increment an character like this:
var str = 'A';
str = ((parseInt(str, 36)+1).toString(36)).replace(/0/g,'A').toUpperCase();
if (str =='1A') {
str = 'A';
}
Yields the next character in the alphabet.
This code seems to work, but I'm not sure it's the best way?
var str = 'Z999';
if (str == 'Z999') {
results = 'A001';
}
else {
var alpha = str.substring(0,1);
num = str.substring(1,4);
if (alpha != 'Z' && num == '999') {
alpha= ((parseInt(alpha, 36)+1).toString(36)).replace(/0/g,'A').toUpperCase();
}
num++;
var numstr = num + "";
while (numstr .length < 3) numstr = "0" + numstr ;
if (numstr == 1000) {
numstr = '001';
}
results = alpha + numstr;
}
results seems to give the correct answer. Yes?

You could use parseInt(input.match(/\d+$/), 10) to extract the number at the end of the string and input.match(/^[A-Za-z]/) to retreive the single character at the beginning.
Increment and pad the number accordingly, and increment the character if the number is over 999 by retrieving the character's character code and incrementing that.
String.fromCharCode(letter.charCodeAt(0) + 1);
Full code/example:
function incrementNumberInString(input) {
var number = parseInt(input.trim().match(/\d+$/), 10),
letter = input.trim().match(/^[A-Za-z]/)[0];
if (number >= 999) {
number = 1;
letter = String.fromCharCode(letter.charCodeAt(0) + 1);
letter = letter === '[' ? 'A': (letter === '{' ? 'a' : letter);
} else {
number++;
}
number = '000'.substring(0, '000'.length - number.toString().length) + number;
return letter + number.toString();
}
document.querySelector('pre').textContent =
'A001: ' + incrementNumberInString('A001')
+ '\nA999: ' + incrementNumberInString('A999')
+ '\nB001: ' + incrementNumberInString('B001')
+ '\nB044: ' + incrementNumberInString('B044')
+ '\nZ999: ' + incrementNumberInString('Z999');
<pre></pre>
Output:
A001: A002
A999: B001
B001: B002
B044: B045
D7777: E001

Try storing A-Z in an array , using String.prototype.replace() with RegExp /([A-Z])(\d+)/g to match uppercase characters , digit characters . Not certain what expected result is if "Z999" reached ?
var arr = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
var spans = document.querySelectorAll("span");
function count(el) {
var data = el.innerHTML.replace(/([A-Z])(\d+)/g, function(match, text, n) {
var _text, _n;
if (Number(n) === 999) {
_text = arr[ arr.indexOf(text) + 1 ];
} else {
_text = text
};
// `"Z999"` condition ?
if (_text === undefined) {
return "<mark>" + text + n + "</mark>"
}
_n = Number(n) + 1 < 1000 ? Number(n) + 1 : "001";
if (n < 10) {
return _text + n.slice(0, 2) + _n
};
if (n < 100) {
return _text + n.slice(0, 1) + _n
} else {
return _text + _n
}
});
el.innerHTML = data
}
for (var i = 0; i < spans.length; i++) {
count(spans[i])
}
<span>A001</span>
<span>A999</span>
<span>B001</span>
<span>C999</span>
<span>D123</span>
<span>Z999</span>

Guess a number game, score counter giving incorrect result

I am making a simple 1 - 10 guess the number game with Javascript.
It can be viewed here Guessing game
To add up score i have a var score = 4 which de-increments each time the number guessed (with a for loop which is smaller than 5) incorrect. I += to var tally and display tally as score.
My problem is score always equals 0, and therefore does not add anything to tally, I am struggling to find a solution.
My javascript is:
var tally;
function play() {
var compNum = (Math.random() * 10).toFixed(0);
var score = 4;
for (var i = 0; i < 4; i++) {
if (i == 0) {
var userNum = prompt("Enter a number between 1 and 10");
} else {
if (userNum < compNum) {
userNum = prompt("Guess higher, you have " + (4 - i) + " turns left ", userNum);
} else if (userNum > compNum) {
userNum = prompt("Guess lower you have " + (4 - i) + " turns left ", userNum);
}
}
score--;
}
tally += score;
$("#score").html("score: " + tally);
if (i >= 3 && userNum != compNum) {
var again = confirm("Sorry you lost. The number was: " + compNum + " Play again?");
} else if (userNum == compNum) {
again = confirm("Well done! play again?");
i <= 5;
}
if (again) {
play();
}
if (userNum == "") {
i <= 5;
}
}
HTML:
<button onclick="play()">PLAY</button>
<div id="score"></div>
Your help is really appreciated

You should check whether the number entered by the use is equal to the random one and if that is the case exit form the for loop.
With your code the loop runs the whole 4 times,

In your loop, you need to check if the user has the right answer and exit the loop if they do.
for (var i = 0; i < 4; i++) {
if (i == 0) {
var userNum = +prompt("Enter a number between 1 and 10");
} else {
if (userNum < compNum) {
userNum = prompt("Guess higher, you have " + (4 - i) + " turns left ", userNum);
} else if (userNum > compNum) {
userNum = prompt("Guess lower you have " + (4 - i) + " turns left ", userNum);
}
}
if (userNum === compNum) {
// they guessed right, so exit the loop
break;
}
score--;
}
In addition, I'd check to see if isNaN(userNum) to check your user actually entered a number. It's up to you if you want to give them another chance if they don't.

JS calculator issue. Wrong Answer

I'm writing a one-line calculator, that has the basic functions (+ - * /). I have done this before, but now I keep getting wrong answers, and I can't find my mistake. Here is my code:
var seq = document.getElementById('sequence').value;
var allNums = [];
var i = 0, allSigns = [];
var currentNums = "";
for (i = 0; i< seq.length; i++)
{
if (seq[i] != "+" && seq[i] != "-" && seq[i] != "*" && seq[i] != "/")
{
currentNums+=seq[i];
}
else
{
allNums.push(Number(currentNums));
currentNums="";
allSigns.push(seq[i]);
}
}
allNums.push(Number(currentNums));
var result = 0;
for (i = 0; i < allNums.length; i++)
{
if (allSigns[i] == '+')
result+=Number(allNums[i]);
else if (allSigns[i] == "-")
result-=Number(allNums[i]);
else if (allSigns[i] == "*")
result*=Number(allNums[i]);
else if (allSigns[i] == "/")
result/=parseInt(allNums[i]);
else
{
alert("The result is: " + result);
break;
}
}
All of this code is in a function, called calculate. The func is triggered by a button, and the sequence comes from an input.

Though there are numerous shortcomings with this simple calculator that may or may not be a problem (depending on what you want to do with it), one issue is that your allSigns array values aren't being associated with the correct allNums array values.
Take a look at this example. In the console, you can see that the sign associated with the 6 is the plus sign, while the operator associated with 2 is undefined. This isn't what we want, of course. What we want is to add the two to the six.
The fix for this issue would be always adding allNums[0] to the result from the start. This sets up our result to be operated upon by anything following it. In this case, we start off with 6.
Next what we need to do is shift the position of each value of allSigns down by one, lining up the operator with the value after it, and not before it. So, in the example above, we'd have + associated with 2, so it'd add the two to the six.
This JSFiddle shows the fix for this specific case.

http://jsbin.com/obasix/3/edit
There are not as many signs as numbers. So therefore, if there are 2 numbers and 1 sign, it will calculate 5 + and then end.
You should start with the result bring the first number.
And then iterate with the remaining numbers and calculate accordingly.
var seq = "5+4";
var allNums = [];
var i = 0, allSigns = [];
var currentNums = "";
for (i = 0; i< seq.length; i++)
{
if (seq[i] != "+" && seq[i] != "-" && seq[i] != "*" && seq[i] != "/")
{
currentNums+=seq[i];
}
else
{
allNums.push(Number(currentNums));
currentNums="";
allSigns.push(seq[i]);
}
}
allNums.push(Number(currentNums));
var result = allNums[0];
for (i = 1; i <= allNums.length; i++)
{
if (allSigns[i-1] == '+')
result+=Number(allNums[i]);
else if (allSigns[i-1] == "-")
result-=Number(allNums[i]);
else if (allSigns[i-1] == "*")
result*=Number(allNums[i]);
else if (allSigns[i-1] == "/")
result/=parseInt(allNums[i]);
else
{
alert("The result is: " + result);
break;
}
}

Try this library https://github.com/notshekhar/calculate.js
Example
<script src="https://raw.githubusercontent.com/notshekhar/calculate.js/main/calculate.js"></script>
<script>
let add = calculate(1, 1, "+") // add -> 2
let sub = calculate(1, 1, "-") // sub -> 0
let mul = calculate(1, 1, "*") // mul -> 1
let div = calculate(1, 1, "/") // div -> 1
let mod = calculate(1, 1, "%") // mod -> 0
</script>

regular expression check if number is whole number or float i think

Hi all I need an if and else statement that checks if two fields which are min and max are numbers and these numbers can be whole numbers like 0 or 12 or they could be 0.50 to 1,300.99 does anyone know how to check for numbers my code is in the following format:
jQuery:
$(document).ready(function(e) {
$('#price_range').click(function(e) {
var price_min = $('#min').val();
var price_max = $('#max').val();
var error_msg = "";
if(price_min.macth(.../) && price_max.match(.../)) {
error_msg = "Please enter a valid number."
}else if(price_min > price_max) {
error_msg = "Min is greater than max."
}
}

I think you don't need regex for number check. You can do a parseFloat and loose compare the results with the initial value.
function isNumber(number) {
var i;
return (!isNaN(i = parseFloat(number)) && number == i);
}

var data = [
"hello.world",
"33",
"25.",
"2.345",
"h.50",
".50",
];
var regex = /^(?:\d+)?(?:\.)?(?:\d+)?$/;
for (var i=0; i<data.length; ++i) {
if (data[i].match(regex)) {
console.log(data[i] + " is a number!");
}
else {
console.log(data[i] + ": NOT");
}
}
--output:--
hello.world: NOT
33 is a number!
25. is a number!
2.345 is a number!
h.50: NOT
.50 is a number!