We Keep Coding

calculating percent in javascript [duplicate]

This question already has answers here:
Adding two numbers concatenates them instead of calculating the sum
(24 answers)
Closed 2 years ago.
I am trying to add the multiplication result, but the result I want doesn't match, can you help me to see where the error is in my javascript code?
The results I want:
((x*10)/100)+x = ...
or ((30.000 * 10) / 100)+30.000 = 33000
but why the results i got = 300030000
var x = document.getElementById("x");
var y = document.getElementById("y");
var d = document.getElementById("d");
var xstored = x.getAttribute("data-in");
var ystored = y.getAttribute("data-in");
setInterval(function(){
if( x == document.activeElement ){
var temp = x.value;
if( xstored != temp ){
xstored = temp;
x.setAttribute("data-in",temp);
calculate();
}
}
if( y == document.activeElement ){
var temp = y.value;
if( ystored != temp ){
ystored = temp;
y.setAttribute("data-in",temp);
calculate();
}
}
},50);
function calculate(){
d.innerHTML = ((x.value * y.value) / 100) + x.value ;
}
x.onblur = calculate;
calculate();
<div class="section">
<div class="container">
<h3>Calculate</h3>
<input id="x" data-in="" type="text" />
x <input id="y" data-in="" type="text" />
<hr>
<div id="d"></div>
</div>
</div>

The value of an input element is a string, so you need to convert it to a number before adding to prevent it from being treated as string concatenation. This can be done using the unary plus operator.
d.innerHTML = ((x.value * y.value) / 100) + (+x.value);

Generate string from integer with arbitrary base in JavaScript

In JavaScript you can generate a string from a number like this:
(123).toString(36) // => "3f"
If you try to do arbitrary base:
(123).toString(40)
You get
Uncaught RangeError: toString() radix argument must be between 2 and 36
at Number.toString (<anonymous>)
at <anonymous>:1:7
Wondering how to do this to generate a string given an arbitrary alphabet. So say you have this alphabet:
abcdefghijklmnopqrstuvwxyz0123456789+-
Then it would be like:
toString(123, 'abcdefghijklmnopqrstuvwxyz0123456789+-')
And it would print something out (I have no idea what) such as 3+, picking from the alphabet.
Wondering how to do this in JavaScript, not sure if the "radix" has anything to do with it. Thank you.
Update: Looking how to reverse it as well, aka fromString(string).

While you asked for a parseInt for an arbitrary length, you could use the given string and reduce it by multiplying the former reduce value with the code length and adding the numerical value of the position of the code character.
Additional is the toString function supplied.
function parseInt(value, code) {
return [...value].reduce((r, a) => r * code.length + code.indexOf(a), 0);
}
function toString(value, code) {
var digit,
radix= code.length,
result = '';
do {
digit = value % radix;
result = code[digit] + result;
value = Math.floor(value / radix);
} while (value)
return result;
}
console.log(parseInt('dj', 'abcdefghijklmnopqrstuvwxyz0123456789+-'));
console.log(toString(123, 'abcdefghijklmnopqrstuvwxyz0123456789+-'));
console.log(parseInt('a', 'abcdefghijklmnopqrstuvwxyz0123456789+-'));
console.log(toString(0, 'abcdefghijklmnopqrstuvwxyz0123456789+-'));
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can simulate that doing:
const toString = (number, alphabet) => {
let result = "";
while (number) {
const digit = number%alphabet.length;
number = (number/alphabet.length)|0;
result = alphabet[digit] + result;
}
return result || alphabet[0];
}
//////////////////// For the opposite, you can use this:
const fromStringBuilder = (alphabet) => {
const alphabetKeys = {};
for (let i = 0; i < alphabet.length; i++) {
alphabetKeys[alphabet[i]] = i;
}
return (string) => {
return [...string].reduce((a,v) => a * alphabet.length + alphabetKeys[v],0);
}
}
//////////////////// Here you have example usage:
toAlphabet = (number) => toString(number, 'abcdefghijklmnopqrstuvwxyz0123456789+-')
fromAlphabet = fromStringBuilder('abcdefghijklmnopqrstuvwxyz0123456789+-')
console.log(fromAlphabet("3+")) // 1138
console.log(toAlphabet(1138)) // "3+"
console.log(toAlphabet(fromAlphabet("3+"))) // "3+"
Note: alphabet must be a string with at least two chars. Otherwise, the loop will be infinite.
Note 2: you have to pass the alphabet in the reverse order from your example to achieve the same exact output.

This works for any base higher than 2. All you have to do is populate the keys array, while the base is calculated by the number of keys.
The output of toString(123, 'abcdefghijklmnopqrstuvwxyz0123456789+-') would be dj.
The output of fromString('dj', 'abcdefghijklmnopqrstuvwxyz0123456789+-') would be 123.
Run the snippet at the bottom of the code to see.
This is the code:
// Converts a string back to it's original number form
function fromString(string, keys)
{
var base = keys.length;
var value = 0;
if(base >= 2)
for(var i=0; i<string.length; i++)
{
if(keys.indexOf(string[i]) != -1) value += keys.indexOf(string[i])*Math.pow(base,string.length - i - 1);
else return 'Invalid code.';
}
return value;
}
// Converts a number from decimal base to base of keys.length
// also, it assumes you enter correct data
function toString(number, keys)
{
var ready = false;
var base = keys.length;
var result = [];
if(base >= 2)
while(true)
{
result.unshift(keys[number % base]);
number = Math.floor(number/base);
if(number < 1) break;
}
return result.join('');
}
// Function that handles events on button click
function encryptDecrypt()
{
var keys = document.getElementById('getTheKeys').value.split('');
var encrypt = document.getElementById('encrypt').value;
var encrypted = document.getElementById('encrypted');
var decrypt = document.getElementById('decrypt').value;
var decrypted = document.getElementById('decrypted');
if(keys != '' && keys.length > 1)
{
if(encrypt != '' && parseInt(encrypt)) encrypted.value = toString(parseInt(encrypt), keys);
if(decrypt != '') decrypted.value = fromString(decrypt, keys);
}
}
.giveMeSomeSpace
{
padding-left:47px;
}
<table>
<tr>
<td colspan="2"><label for="getTheKeys">Enter the key string: </label><input type="text" id="getTheKeys" value="abcdefghijklmnopqrstuvwxyz0123456789+-" size="53"/></td>
<tr>
<tr>
<td><label for="encrypt">Encrypt: </label><input type="text" id="encrypt" value="" placeholder="Enter a number"/></td>
<td class="giveMeSomeSpace"><label for="encrypted">Encrypted: </label><input type="text" id="encrypted" value="" readonly="readonly" /></td>
<tr>
<tr>
<td><label for="decrypt">Decrypt: </label><input type="text" id="decrypt" value="" placeholder="Enter a key combination"/></td>
<td class="giveMeSomeSpace"><label for="decrypted">Decrypted: </label><input type="text" id="decrypted" value="" readonly="readonly" /></td>
<tr>
</table>
<input type="button" id="checkNow" value="Go" onclick="encryptDecrypt();" />

Let's make a simple function for base 10 to base N.
function b102bN (n,b, r = []){
var getNumeral = d => d < 10 ? d : String.fromCharCode(d+87);
return n ? (r.unshift(getNumeral(n%b)), b102bN(~~(n/b), b, r)) : r.join("");
}
console.log(b102bN(123,36));
console.log(b102bN(1453,40)); // obviously base 40 requires interesting characters as numerals

How to get sum of highest 5 values of an array using Javascript or Jquery?

I have an array of 6 values where 6th value is optional (i.e. if user does not input 6th value, the first 5 values will be calculated). I want to sum highest 5 values of them.
My Javascript Code:
function calculate_merit_point(){
var s1 = eval(document.getElementById('sub_no1').value);
var s2 = eval(document.getElementById('sub_no2').value);
var s3 = eval(document.getElementById('sub_no3').value);
var s4 = eval(document.getElementById('sub_no4').value);
var s5 = eval(document.getElementById('sub_no5').value);
var s6 = eval(document.getElementById('sub_no6').value);
var vals = [s1,s2,s3,s4,s5,s6];
function arraySum(arr) {
if (!arr) {
return false;
} else {
var sum = 0;
for (var i = 0, len = arr.length; i < len; i++) {
sum += arr[i];
}
return sum;
}
}
sum = arraySum(vals.sort(function(a, b) {
return b - a;
}).slice(0, 5));
if(isNaN(tt)){
$('#agr').text('0');
} else {
$('#agr').text(sum);
}
}
Now suppose
s1 = 30
s2 = 31
s3 = 32
s4 = 33
s5 = 34
s6 = 35
It should be 31+32+33+34+35 = 165. but it is displaying the value 162.
As per my requirement (6th value optional), if I do not give any value to s6, it is displaying the value 228.
I have tried This, but if I do not give the 6th (optional) value, it is showing the value 0. If I give the value 35 in s6, it is showing sum value 233.
What should I do ?
UPDATE & RESOLVED
My code was correct. But something was creating problem with the code eval(). I replaced it with Number() and it was resolved.
Thank you all.

This would be a great opportunity to use .reduce. Which will return a single value given an array. While we're "looping" through the array, we will determine the lowest value, and then subtract that from the result. Also, you're clearly using jQuery to apply the .text() so, may as well use it to get the .val() of each of your inputs. Then we'll use parseInt with a check to return 0 in the event of an error/invalid result
JSFIDDLE
HTML
<input id="sub_no1" value="30" />
<input id="sub_no2" value="31" />
<input id="sub_no3" value="32" />
<input id="sub_no4" value="33" />
<input id="sub_no5" value="34" />
<input id="sub_no6" value="35" />
<p id="agr"></p>
JS
$(function() {
function calculate_merit_point() {
var s1 = getValue($('#sub_no1'));
var s2 = getValue($('#sub_no2'));
var s3 = getValue($('#sub_no3'));
var s4 = getValue($('#sub_no4'));
var s5 = getValue($('#sub_no5'));
var s6 = getValue($('#sub_no6'));
var vals = [s1, s2, s3, s4, s5, s6];
function getValue(el) {
return parseInt(el.val(), 10) || 0;
}
function arraySum(arr) {
if (!arr) {
return 0;
} else {
var lowest = Infinity;
return vals.reduce(function(sum, val) {
if (val < lowest){ lowest = val; }
return sum + val;
}, 0) - lowest;
}
}
$('#agr').text(arraySum(vals));
}
calculate_merit_point();
})

You can sum more easily with reduce, and subtract the highest value with Math.max using this ES6 code:
var vals = [30,31,32,33,34,35,36];
// Get sum
var sum = vals.reduce( (a,b) => a+b, 0 );
// Subtract highest value
if (vals.length == 6) sum -= Math.max(...vals);
// Output result
console.log(sum);
Here is that code integrated with the element names you mention in your code, but using jQuery also for the first part:
function calculate_merit_point(){
// Get all six input elements by using jQuery with a smarter selector:
var vals = $('[id^=sub_no]').map(function () {
return parseInt($(this).val()); // get the value as numeric for each of them
}).get().filter(n => !isNaN(n)); // filter the result to get real numbers only
// get sum
var sum = vals.reduce( (a,b) => a+b, 0 );
// Remove greatest value from it if we have 6 numbers
if (vals.length == 6) sum -= Math.max(...vals);
// Output the result.
$('#agr').text(sum);
}
calculate_merit_point();
$('input').on('input', calculate_merit_point);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sub_no1" value="1"><br>
<input id="sub_no2" value="2"><br>
<input id="sub_no3" value="3"><br>
<input id="sub_no4" value="4"><br>
<input id="sub_no5" value="5"><br>
<input id="sub_no6" value="6"><br>
<hr>
Sum: <span id="agr"></span>
You can adjust the values when running the above snippet and the sum will adapt.
ES5 equivalent
For when you don't have ES6 support:
function calculate_merit_point(){
// Get all six input elements by using jQuery with a smarter selector:
var vals = $('[id^=sub_no]').map(function () {
return parseInt($(this).val()); // get the value as numeric for each of them
}).get().filter(function (n) {
return !isNaN(n); // filter the result to get real numbers only
});
// get sum
var sum = vals.reduce(function (a,b) {
return a+b;
}, 0);
// Remove greatest value from it if we have 6 numbers
if (vals.length == 6) sum -= Math.max.apply(Math, vals);
// Output the result.
$('#agr').text(sum);
}
calculate_merit_point();
$('input').on('input', calculate_merit_point);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sub_no1" value="1"><br>
<input id="sub_no2" value="2"><br>
<input id="sub_no3" value="3"><br>
<input id="sub_no4" value="4"><br>
<input id="sub_no5" value="5"><br>
<input id="sub_no6" value="6"><br>
<hr>
Sum: <span id="agr"></span>

PESEL checksum validation(Javascript/HTML)

Im a student currently studying from home and im seriously stuck on a Checksum problem. The script is supposed to validate the PESEL(Polish equivilant of a social security number i think), Anyway the checksum works as follows for
PESEL: 70051012347
PESEL:7,0,0,5,1,0,1,2,3,4 (7)
(Multiply each Pesel number by its corresponding check number)
CHECK:1,3,7,9,1,3,7,9,1,3
(Sum Each number)
SUM: + 7,0,0,45,1,0,7,18,3,12 =93
MOD: 93 MOD 10 = 3
10 - 3 = 7(last digit of pesel)
Where the MOD 10 doesn't equal 0, the result of sum%10 is subtracted from 10 and then matched with the final digit in the original number, if they match its good, if not its bad. All i need to have is a good or bad result.
I'm pretty sure I have all of this fine in my code and there's a simple solution i just cant see it. Any help at all would be massively appreciated.
<html>
<head>
<meta charset="utf-8">
<title>Pesel Checker</title>
<script type="text/javascript">
function peselgood(y)
{
//sample PESEL's
//type 1
//70051012347
//02070803628
//07020803628
//type 2
//83102570819
if (y.length == 11)
{
var arr = [1,3,7,9,1,3,7,9,1,3];
var sum = 0;
//hold original number
var a = parseInt(y);
//First 10 digits without check number and convert to array
y = y.substring(0,9);
y = parseInt(y);
var arr1 = new Array(10);
arr1 = y;
//muliply pesel digits by checksum digits
for (var i = 0; i < 10; i++)
{
sum += arr[i] * arr1[i];
}
sum = sum%10;
if (sum !== 0)
{
sum = 10-sum;
if(sum != a[10])
{
return false;
}
else
{
return true;
}
}
}
else
{
return false;
}
}
function checkpesel()
{
num = document.getElementById("peselfield").value
if (peselgood(num))
{
document.getElementById("peselfield").style.background="#00ff00";
}
else
{
document.getElementById("peselfield").style.background="#ff6666";
}
}
</script>
</head>
<body>
<div>
Check Sum Template
<br/><br/>
<form name="form">
PESEL:
<input type="text" id="peselfield" value="70051012347" /> <button type="button" onclick="checkpesel()">Check</button>
<br/><br/>
</form>
</div>
<br/><br/>
</body>
</html>

You have made a couple of mistakes. If you step through your code using a JavaScript debugger, you will find out exactly what goes wrong. The most important fact is, that you don't have to convert a string to an array of integers. JavaScript automatically understands when to convert a character to an integer.
This is my solution:
function peselgood(y)
{
if (y.length == 11)
{
var arr = [1,3,7,9,1,3,7,9,1,3];
var sum = 0;
//muliply pesel digits by checksum digits
for (var i = 0; i < 10; i++)
{
sum += arr[i] * y[i];
}
sum = sum%10 == 0 ? 0 : 10-sum%10;
return sum == y[10];
}
else
{
return false;
}
}

function checksum(p) { let i, s = +p[ i = 10 ]; while( i-- ) s += "1379"[ i % 4 ] * p[i]; return ! ( s % 10 ); }
<input id="pesel" placeholder="PESEL" autofocus>
<input type="button" value="check" onclick="alert( checksum(pesel.value) ? 'Ok' : 'Bad' )">

How can I add a comma to separate each group of three digits in a text input field?

I have a text input field for a form where users are meant to enter a number. I would like to automatically insert a comma after every third digit.
For example, entering '20' would result in '20'. Entering '100' would result in '100'. But if they were to enter '1000', a comma would be inserted between the 1 and the following 0's (e.g., 1,000). Obviously this behaviour would continue should the number reach 7 digits (e.g., 1,000,000).
Is there an easy way to do this? I'm a bit of a newb at all of this, so please answer like you're talking to a child :)

The following javascript:
function format(input)
{
var nStr = input.value + '';
nStr = nStr.replace( /\,/g, "");
var x = nStr.split( '.' );
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while ( rgx.test(x1) ) {
x1 = x1.replace( rgx, '$1' + ',' + '$2' );
}
input.value = x1 + x2;
}
and the following HTML:
<input type="text" onkeyup="format(this)">
should solve your problem. The key is to use 'onkeyup'.
Try it here http://jsfiddle.net/YUSph/

for the fun of it:
'9876543210'
.split('') // flip the entire string so that we can break every
.reverse() // 3rd digit, starting from the end
.join('')
.split(/(...)/) // split on every 3rd
.reverse() // flip the string again, though now each group of 3 is
.join(',') // backwards
.replace(/,(?=,)|,$|^,/g, '') // remove extra ,
.replace(/(,|^)(\d)(\d)?(\d)?/g, '$1$4$3$2') // flip each group of digits
// 9,876,543,210
Anyone want to take a stab at making that better?

function addCommas(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Pass the value of the input into function and set the input with the result returned. You can bind this to an onchange event.
Here is a working example that relies on jquery to bind the change event and set the value: http://jsfiddle.net/TYyfn/
Comma script is from: http://www.mredkj.com/javascript/nfbasic.html

Yes, it's not terribly difficult. I believe this reference may give you what you need.
Note that for this to be dynamic (as they type) you'd need to have this wired to the input field change handler. Otherwise, you can wire this to the input field blur handler (which will have the effect of putting the commas in the field when they leave the field).

Give this a try: it may need a little tweeking.
take the function from above: function addCommas(nStr){...} and put in a js file.
add a script link in the page header to jquery library with:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"
be sure your text box has a unique id. ex: id="comma_input".
in the same js file add
$(document).ready(function(){
$('#comma_input').keyup(function(){
$(this).attr('value',addCommas($(this).attr('value')));
});
});

function addCommas(nStr){
var offset = nStr.length % 3;
if (offset == 0)
return nStr.substring(0, offset) + nStr.substring(offset).replace(/([0-9]{3})(?=[0-9]+)/g, "$1,");
else
return nStr.substring(0, offset) + nStr.substring(offset).replace(/([0-9]{3})/g, ",$1");
}
alert(addCommas("1234567"));

Another way to do it, no RegEx, just array manipulation:
function decimalMark(s) {
for (var a = s.split("").reverse(), b = [], i = 0; i < a.length; i++) {
if (i && i%3 === 0)
b.unshift(",");
b.unshift(a[i]);
}
return b.join("");
}
Be sure to pass a string to the function
decimalMark("1234")

Simple string solution in pure JS:
function addCommas(e) {
var tgt = e.target, val = tgt.value.replace(/,/g, ''),
amt = Math.ceil(val.length/3), newStr = '', x = 0;
while ( x <= amt ) {
newStr += val.slice(x*3,(x+1)*3);
newStr += ( x < amt-1 ) ? ',' : '';
x++
}
tgt.value = newStr;
}
document.getElementById('test').addEventListener('change', addCommas, false);
Demo: http://jsfiddle.net/kevinvanlierde/TYyfn/141/

You can use standart JavaScript functions. Example here;
http://jsfiddle.net/azur/jD5pa/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>pure js solution</title>
<script type='text/javascript'>
function digitGroup(dInput) {
var output = "";
try {
dInput = dInput.replace(/[^0-9]/g, ""); // remove all chars including spaces, except digits.
var totalSize = dInput.length;
for (var i = totalSize - 1; i > -1; i--) {
output = dInput.charAt(i) + output;
var cnt = totalSize - i;
if (cnt % 3 === 0 && i !== 0) {
output = " " + output; // seperator is " "
}
}
} catch (err)
{
output = dInput; // it won't happen, but it's sweet to catch exceptions.
}
return output;
}
</script>
</head>
<body>
<input type="text" value="53" onkeyup="this.value = digitGroup(this.value);">
</body>
</html>

var formatNumber = function(num, type) {
var numSplit, int, dec, type;
num = Math.abs(num);
num = num.toFixed(2);
numSplit = num.split('.')
int = numSplit[0];
if (int.length >= 3) {
int = int.substr(0, int.length - 3) + ',' + int.substr(int.length - 3, 3);
}
dec = numSplit[1];
return (type === 'exp'? sign = '-' : '+') + ' ' + int + '.' + dec;
};