I have a button that dynamically creates 2 inputs per click
Data of Input 1: string
Data of Input 2: number (float) (0-100)
I am creating an array of each like this.
var recipe_flavour_name = $("input[name='flav-name']").map(function() {return $(this).val();}).get();
var recipe_flavour_percent = $("input[name='flav-percent']").map(function(){return $(this).val();}).get();
As far as I can tell, the arrays are comma separated values.
Let's for simplicity's sake say:
recipe_flavour_name = a,b,c
recipe_flavour_percent = 5,6,7
I then want to take the number value to use in a function and then loop through all the values and use jQuery's .html() to add the values to a div.
I have tried this: flavPercent1 is just recipe_flavour_percent
var arrayLength = flavPercent1.Length;
for (var i = 0; i < arrayLength; i++) {
var flavML = (flavPercent1[0] / 100 * 100 * 1000) / 1000;
var flavGrams = (flavML * .98 * 100) / 100;
var flavPercent = (flavML / 100 * 1E4) / 100;
$('.live-flavours').html('<tr>'+flavName[0]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[0]).toFixed(2)+'</td></tr>');
};
But I only get flavGrams and flavPercent returned, dynamically adding more data to the array does nothing.
What do I want to achieve?
Grab the values of specified inputs in an array.
Pass them to a function.
Loop through the values and output them in HTML using jQuery.
I hope that makes sense and thanks in advance.
Ok, so assuming that you don't have a problem getting the arrays you need, the problem lies within your for loop.
YOUR CODE:
for (var i = 0; i < arrayLength; i++) {
var flavML = (flavPercent1[0] / 100 * AMOUNT * 1000) / 1000;
var flavGrams = (flavML * .98 * 100) / 100;
var flavPercent = (flavML / AMOUNT * 1E4) / 100;
$('.live-flavours').html('<tr>'+flavName[0]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[0]).toFixed(2)+'</td></tr>');};
You put everything in the for loop, yet make no reference to the index. I'm assuming everywhere you put [0] you actually want [i]. This means that every time the index increases, you are getting the next array element.
You should use .append instead of .html. .html means that the current html will be replaced by what you are adding.
Finally, although making it dynamic is possible, I'm not sure that JQuery is the best libary to use in this case. I'd suggest taking a look at libraries such as Vue or MoonJs (both are very light and very simple libraries) etc... to find a much easier, and frankly better way to do this. They allow for dynamic rendering, and what you are trying to do becomes insanely simplified.
Hope this helps.
(hopefully) WORKING CODE:
for (var i = 0; i < arrayLength; i++) {
var flavML = (flavPercent1[i] / 100 * AMOUNT * 1000) / 1000;
var flavGrams = (flavML * .98 * 100) / 100;
var flavPercent = (flavML / AMOUNT * 1E4) / 100;
$('.live-flavours').append('<tr>'+flavName[i]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[i]).toFixed(2)+'</td></tr>');};
Related
I have a javascript array defined as below:
var hexgon = ['M',r*Math.cos(0/180*Math.PI),r*Math.sin(0/180*Math.PI)
,r*Math.cos(30/180*Math.PI),r*Math.sin(30/180*Math.PI)
,r*Math.cos(90/180*Math.PI),r*Math.sin(90/180*Math.PI)
,r*Math.cos(150/180*Math.PI),r*Math.sin(150/180*Math.PI)
,r*Math.cos(210/180*Math.PI),r*Math.sin(210/180*Math.PI)
,r*Math.cos(270/180*Math.PI),r*Math.sin(270/180*Math.PI),
,r*Math.cos(330/180*Math.PI),r*Math.sin(330/180*Math.PI),'Z']
How to use a loop to simplify this logic?
If you did not intend two commas in a row after the twelth element then this:
var hexgon = ['M', ...[0,30,90,150,210,270,330].flatMap(d => [r*Math.cos(d/180*Math.PI),r*Math.sin(d/180*Math.PI)]), 'Z']
If you can have a constant value as a step that gets added to Math.cos() and Math.sin() statements we might be able to do something.
Let's say we want to add 30 each time to the each array's element, we can do something like this: (Also noticed there are M and Z characters at the beginning and end of your array)
const newHexgon = new Array(16);
newHexgon[0] = 'M';
newHexgon[newHexgon.length - 1] = 'Z';
let counter = 0;
let step = 30;
for (let i = 1; i < newHexgon.length - 1; i += 2) {
newHexgon[i] = Math.cos(((counter * step) / 180) * Math.PI);
newHexgon[i + 1] = Math.sin(((counter * step) / 180) * Math.PI);
counter++;
}
console.log(newHexgon);
I created an array with a length of 16 and set the first and last elements to "M" and "Z" as in your array. Then I will loop every two elements at a time i += 2 and set the Math calculations and after finished in each iteration the counter gets added by one.
I am still learning JS (not jquery). So in learning, I am starting with a simple game. I found a problem. I cannot get these arrays to work, as they are producing a NaN.
var clickMultiplier = 1.11;
var idleMultiplier = 1.15;
var idleBuffsCost = [];
idleBuffsCost[0] = 100;
var clickBuffsCost = [];
clickBuffsCost[0] = 100;
var trainerBuffsCost = [];
trainerBuffsCost[0] = 1250;
for (i = 1; i <= 20; i++) {
var j = i - 1;
idleBuffsCost[i] += idleBuffsCost[j] * idleMultiplier;
clickBuffsCost[i] = clickBuffsCost[i] + clickBuffsCost[j] * clickMultiplier;
trainerBuffsCost[i] += trainerBuffsCost[j] * 1.25;
}
console.log(clickBuffsCost[0]); // works = 100
console.log(clickBuffsCost[1]); // does not work NaN
What am I doing wrong?
Also, I am used to doing arrays (like the above) as
... idleBuffsCost[i-1]
However, that does not seem to be working.
What do you think? Am I not seeing the forest for the trees (I normally program in php/mysql/pascal/qb64(and other derivations) and a few more languages - just adding JS to the list hahaha)
ps the different assignments are because I was trying different logic operations.
thanks to a few people here - I made a simple mistake. the loop was trying to assign a value to an index that was not assigned yet. Here is the fix - I removed the += and left just =
idleBuffsCost[i] = idleBuffsCost[j] * idleMultiplier;
clickBuffsCost[i] = clickBuffsCost[j] * clickMultiplier;
trainerBuffsCost[i] = trainerBuffsCost[j] * 1.25;
special thanks to: #certainPeformance, #Wais Kamal and #David I wish I could green check them all. But they were helpful none-the-less, Thanks guys!
There is a little mistake in your code. Search this line of code.
clickBuffsCost[i] = clickBuffsCost[i] + (clickBuffsCost[j] * clickMultiplier);
change to:
clickBuffsCost[i] = clickBuffsCost[j] + (clickBuffsCost[j] * clickMultiplier); // notice the difference after the = part
Since i will start at 1, clickBuffsCost[1] is undefined because clickBuffsCost only consists of one item at the beginning.
Here is where you've gone wrong:
for (i = 1; i <= 20; i++) {
var j = i - 1;
idleBuffsCost[i] += idleBuffsCost[j] * idleMultiplier;
clickBuffsCost[i] = clickBuffsCost[i] + (clickBuffsCost[j] * clickMultiplier);
trainerBuffsCost[i] += trainerBuffsCost[j] * 1.25;
}
First of all, define i before using it. Defining variables is good programming practice.
clickBuffsCost[i] = clickBuffsCost[i] + (clickBuffsCost[j] * clickMultiplier);
In the first iteration of your loop, i has the value 1, while j has the value 0. You are setting the second element of clickBuffsCost as clickBuffsCost[i] + (clickBuffsCost[j] * clickMultiplier). clickBuffsCost[i] (which is equal to clickBuffsCost[1] in this case) is undefined, which is why you are getting NaN when calling console.log(clickBuffsCost[0]).
You need to initialise your array lengths. For example, if you know you have 20 elements in an array, you should initialise an array as follows:
const testArr = new Array(20);.
Alternatively, if you don't know the length of your array, instead of indexing the ith element of the array and assigning it a value, you could use the array push(..) function. This method means you do not have to initialise an array with a length.
You can read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
I have a small "problem". I try to do a Loop-for for a
"getElementsByName" for each rows in the table.
I try to loop a few values.
Price * Quantity * discount * tax (select.options) = MY Final price after discout.
AD: (You have to open Full View)
For a single line it works great by getElementById. However, the need for the creation of the next line (Button Add Position). So i chose GetElementsByName
Also counted for him the value (in place "after rebate")
--EDIT--
I made a loop "For".
In html code I have a lot the same fields "named" (ex. cena, ile, rabat etc.)
So if I will had 3 rows with this fields I want to calculate for each line separately. But my loop doesn't work.
Full View you can see here:
http://codepen.io/warhero/pen/WwvLZE (121 line JS)
My JS code:
var i;
for (i = 0; i < document.getElementsByName('kwotarabat').length; i++) {
var cena = parseInt(document.getElementsByName('cena')[i].value);
var ile = parseInt(document.getElementsByName('ile')[i].value);
var rabat = parseInt(document.getElementsByName('rabat')[i].value);
var vat = document.getElementsByName('vat')[i].options[document.getElementsByName('vat')[i].selectedIndex].value;
// vat value
var wynik = (ile * cena * vat);
// the net value
var wynik2 = cena * ile;
// net amount after discount
var wynikRabat = (wynik2 * (rabat / 100));
// gross amount after discount
var wynikRabatVat = (wynik * (rabat / 100));
// net amount after discount (display for customers)
var wynikNetto = (wynik2 - wynikRabat);
document.getElementsByName('kwotarabat')[i].innerHTML = (wynik + wynik2 - wynikRabat - wynikRabatVat).toFixed(2);
}
In Here >> http://codepen.io/warhero/pen/ONVEmZ is the code for a single row and calculations are correct.
Any Ideas ?
Say I have array [1,2,5,18,17,8] and I want to turn that into an array of length 40 that follows the same path.
a = [1,2,5,18,17,8];
stepSize = 1 / (40 / a.length);
then i think i could do something like
steps = [];
for( var i = 0; i < 1; i+= stepSize) {
steps.push(d3.interpolate(a[0],a[1])(i));
}
and then repeat that for all the elements. My question is there a better way to do this?
I can only guess what your real problem is but I think you want to plot these values and have a smooth curve. In that case use line.interpolate() https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate
In case you DO know what you need and your solution works for you, take this tip:
Never iterate over stepSize. Calculate it once and multiply it with i in every loop where i goes from 0 to 40. This way you work around precision problems.
Your algorithm cleaned up, tested and working:
var a = [1,5,12,76,1,2];
var steps = 24;
var ss = (a.length-1) / (steps-1);
var result = new Array(steps);
for (var i=0; i<steps; i++) {
var progress = ss * i;
var left = Math.floor(progress);
var right = Math.ceil(progress);
var factor = progress - left;
result[i] = (1 - factor) * a[left] + (factor) * a[right];
// alternative that actually works the same:
//result[i] = d3.interpolateNumber(a[left], a[right], factor);
}
console.log(result);
I have a function which takes an array of values and a sampling rate. The function should remove values randomly by the sampling rate. For instance a sampling rate of 20% should remove 20% of the values. How can I achieve this with a very good performance, because I will iterate over more than 10.000 values?
My idea is something like
for(var i = values.length-1; i >= 0; i--){
var rnd = Math.floor((Math.random() * 100) + 1);
if(rnd < samplingRate)
values.splice(i,1);
}
but I think the Math.random() function is no performant choice.
There's really no need to iterate over the whole array if you only want to operate on 20% of it.
Loop for n times where n = Math.floor(0.20 * originalArray.length) - 1 and on each iteration get a random element from the array and remove it.
Unless you need to support older browsers use the .filter() method:
var samplingPercentage = samplingRate / 100;
var filtered = values.filter(function() {
return Math.random() < samplingPercentage;
});