property undefined but console.log can see it - javascript

I am creating a dynamic form which consists of sku, qty and subtotal. So the form starts out from no inputs and filled up as the user searches for products. Upon keypress I need to compute the total quantity and show it to the user via javascript.
I am using getting all quantity input elements via getElementsByClassName upon keypress and counting all values. however the browser is returning an error (Uncaught TypeError: Cannot read property 'value' of undefined) but I can log the value.
I only use native JavaScript no jQuery.
qtyelements = document.getElementsByClassName('qty-element');
var x;
var count = 0;
for(x = 0; x <= qtyelements.length; x++){
console.log(qtyelements[x].value);
count = count + parseInt(qtyelements[x].value);
}
Here is an image of my
problem

Length gives you the number of items, but the collection is zero based. So for example while the length may be three, you only loop to two (0, 1, 2).
So change:
x <= qtyelements.length
to:
x < qtyelements.length
In your case it looks like you only have two elements, so the indices would be 0 and 1, but you check to see if 2 exists with the <=, hence the undefined.

Related

How to exclude null values from being pushed into an array?

I'm trying to do something which I thought would be extremely simple but is baffling me for some reason: I've got a function that's pushing a bunch of IDs of locations into an array and I don't want it to push these values in if they're null (the script allows user input from a Google Sheet so it's possible they'll input an incorrect value that won't get matched to an ID).
I've tried this so far:
for (var i = 0; i <= startEndDifference; i++) {
if (objectLocationInputStart != null) {
objectLocationIdsArray.push(locationMatch(objectLocationInputStart));
}
objectLocationInputStart = objectLocationInputStart + 1
}
but null values are still pushing to the array.
For context, this is referring to two cells in a Google sheet with a starting number and an ending number, and the for loop picks up all the numbers in between and matches them to an ID using the function. Everything it does is working perfectly other than passing in the null values.

Finding DOM Values using eq([i])

I have the below code to get all the "Names" given in an IE form, one after the other using javascript. This script suppose to use the IE DOM explorer to get the value.
There would be one or more values that would match the query below at any given time. Therefore, I'll have to use a "For Loop" to get and assign the value to a variable one after the other. I would like to find the maximum number of occurrence to use in the For loop, by getting the value from $('tr.background-light:last').text(). This will contain a number and a name. I am stripping the number only by splitting it cnt=cnt.split(".",1) and assigning this to a variable.
Then using that as my maximum number to loop and trying to assign the value to an array. But it isn't running.
javascript:(function()
{
ver item;
var cnt=$('tr.background-light:last').text(); //getting the last background-light value which will contain the total number of Affected Client's
cnt=cnt.split(".",1); // Stripping just the number out from the above variable
for (var i =0; i <cnt.length; i++)
{
item= $("tr.background-light:eq("+i+")").text(); //looping through to get each affected client info
alert(item)
};
})();

checking if input is greater or lesser than array values

Sorry if this is a duplicate.
Let's say I have an array of 12 numbers, and I want to check those values against an input and then output how many values inside the array are higher than the input and lower than the input.
I wasn't sure how to do this in jQuery but if it's not possible in jQuery I am open to other suggestions. I wasn't sure if using the inArray or grep function would even work for this type of implementation.
Using jQuery you can run a foreach loop and count how many values are higher and lower from the array you have.
Try this:
var higher = 0;
var lower = 0;
$.each(arr, function(k,v){
// will miss if value is equals.
if (input < v) higher ++;
if (input > v) lower ++;
})
console.log("Higher values are: "+higher+ " | Lower values are: "+lower);
Assuming arr is your array and input variable is what user inputs.
ref: http://api.jquery.com/jquery.each/

Angularjs Synced inputs for percetange

I need to have x amount of text input fields.
Each input field will start off with an equal value to the rest.
This value is 100 / Number of inputs.
I need to have the input fields synced, so when one value is changed, the rest of the values are recalculated to equal 100.
This problem seems fairly complex to solve, but I'm sure it must have been done before, it seems like it could be quite common.
Instead of me badly explaining the problem, here is an example of it working. It doesn't use text fields, rather sliders. But the solution is the same.
https://www.humblebundle.com/weekly
Click Choose where your money goes
jsFiddle for example: http://jsfiddle.net/r4qbx9Lb/5/
First of all, you need a $watch in your controller since you want all your input values to change based on a change in any of them. In your $watch callback function, you need to figure out which array index (what input) had been changed by the user.
All of this would look something like the following:
// 100 in this example, but can be whatever
$scope.totalValue = 100;
$scope.$watch('inputs', function(newValue, oldValue){
for(var i = 0; i < newValue.length; i++){
if(newValue[i].value != oldValue[i].value){
$scope.changedIndex = i;
$scope.leftOverValue = $scope.totalValue - newValue[i].value;
$scope.percentChange = (newValue[i].value - oldValue[i].value) / oldValue[i].value;
console.log($scope.leftOverValue);
console.log(percentChange);
}
}
}, true);
Once you have this information, you can apply it to all of the array values that weren't changed by the user. So run another loop (you'll need to split out your two loops because you don't know what index the changed value is initially) and change any of the non-affected index values in this loop:
for(var x = 0; x < newValue.length; x++){
if($scope.changedIndex != x){
//Do math and apply logic
}
}
Then you can apply any math formula you want to adjust your other values. You'll have to figure this part out - depending on if you want your other values to change proportionally to their old value or proportionally to the change the user made to the input they edited.
http://jsfiddle.net/r4qbx9Lb/10/

Array equal two different values and change a variable dynamically

I want a user to key in an ID Number. When the user clicks on a button, the code will look for an array that has a list of all the id numbers to check if it exists. It will then go to check the price of that id number. Based on the price and what ID number was looked up I want this to change a variable called 'cost' dynamically. So for example, a user keys in the number "5555" The code looks up if the ID 5555 exists, if it does, it checks the price of that id. Based on that price, I want it to change a variable called cost. Likewise, if I looked up an id of "1234". It would look up the id, if it existed, got the price and then changed the variable called cost.
I don't even know where to begin with this. I was thinking about using arrays to map the id numbers and price but I don't know if that will work. I want a number to equal another number essentially and then change a variable based on the second number and I can't think of how to do that.
id[0] = new Array(2)
id[1] = "5555";
id[2] = "6789";
price = new Array(2)
price[0] = 45;
price[1] = 18;
You could use an object as a dictionary like object.
// Default val for cost
var cost = -1;
// Create your dictionary (key/value pairs)
// "key": value (e.g. The key "5555" maps to the value '45')
var list = {
"5555": 45,
"6789": 18
};
// jQuery click event wiring (not relevant to the question)
$("#yourButton").click(function() {
// Get the value of the input field with the id 'yourInput' (this is done with jQuery)
var input = $("#yourInput").val();
// If the list has a key that matches what the user typed,
// set `cost` to its value, otherwise, set it to negative one.
// This is shorthand syntax. See below for its equivalent
cost = list[input] || -1;
// Above is equivalent to
/*
if (list[input])
cost = list[input];
else
cost = -1;
*/
// Log the value of cost to the console
console.log(cost);
});

Categories