Array not returning the expected output

Question

I am trying to get user input and store it on an array but I can't seem to get the correct output, when I console log the results I get different arrays with 0 length

Here's my code.

let bambooInputElement = document.querySelector('.bambooInputElement');

let bambooTotal = [];

function calculateBamboo() {
    bambooInputElement = bambooInputElement.value;

    if (bambooInputElement < 25) {
        alert('Pledge must be at least $25.');
    }else {
        let amountDonated = 0;

        for (let i = 0; i < bambooTotal.length; i++) {
            bambooTotal.push(bambooInputElement);
            amountDonated = amountDonated + bambooTotal[i];
        }
    }
}
bambooBtnElement.addEventListener('click', calculateBamboo);

You're not pushing into your list at all, the condition bambooTotal is always zero and hence nothing is ever pushed into the list, bring the push statement outside of the for loop, and try to add clarifications to what you wanna do with amountDonated too. — Houman Moallemi
– Houman Moallemi, Commented Feb 27, 2021 at 9:45
bambooInputElement = bambooInputElement.value; is quite suspect. What is bambooInputElement to start with? Why are you replacing that initial value with bambooInputElement.value? The second time you call calcualteBamboo, bambooInputElement will be the bambooInputElement.value from the previous call. — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2021 at 9:45
Welcome to Stack Overflow! Aside from the two issues noted above, there isn't enough information here for us to effectively help you. Please take the tour (you get a badge!), have a look around, and read through the help center, in particular How do I ask a good question? I also recommend Jon Skeet's Writing the Perfect Question and Question Checklist. — T.J. Crowder
– T.J. Crowder, Commented Feb 27, 2021 at 9:46
bambooInputElement is the html input element hence I'm reassigning it, bambooInputElement = bambooInputElement.value; I want the value the user enters and push it on the bambooTotal array when a button is clicked — Luyolo Mntuyedwa
– Luyolo Mntuyedwa, Commented Feb 27, 2021 at 9:56
Could you please create a minimal reproducible example ? That means a minimal JS / HTML and if needed CSS? — Roko C. Buljan
– Roko C. Buljan, Commented Feb 27, 2021 at 10:02

Roko C. Buljan · Accepted Answer · 2021-02-27 10:13:14Z

bambooInputElement is exactly what it says - and that's an Element, not its value - don't reassign types. Use a new variable instead.
Array.prototype.push() should be outside of the loop. Actually you don't need a for loop at all, use Reduce.
Use Array.prototype.reduce() to reduce an array to a single value (the total amount)
Use return inside a function to return a result / or an alert - if that's what you want.

const bambooInputElement = document.querySelector('.bambooInputElement');
const bambooBtnElement = document.querySelector('.bambooBtnElement');

const bambooDonations = []; // this is not total, those are donations!

function calculateBamboo() {
  const val = parseFloat(bambooInputElement.value);
  if (val < 25) return alert('Pledge must be at least $25.');
  // Add to array of donations
  bambooDonations.push(val);
  // Get total donations
  const totalDonations = bambooDonations.reduce((a, v) => a+=v, 0);
  // Reset input value
  bambooInputElement.value = "";
  console.log(totalDonations); // TEST ONLY
  // return that total:
  return totalDonations;
}

bambooBtnElement.addEventListener('click', calculateBamboo);

<input type="number" class="bambooInputElement">
<button type="button" class="bambooBtnElement">CALCULATE</button>

zhulien · Accepted Answer · 2021-02-27 09:49:42Z

0

The line bambooTotal.push(bambooInputElement) should be before the for loop. This is because, without pushing an element in the array, the length will always be zero hence it won't enter in the array. Putting that line out of the for loop will ensure that the value get's entered and then the array is of atleast length 1.

edited Feb 27, 2021 at 9:49

zhulien

5,8254 gold badges25 silver badges41 bronze badges

answered Feb 27, 2021 at 9:46

Tejas Shetty

1922 silver badges10 bronze badges

1 Comment

Luyolo Mntuyedwa Over a year ago

This works but it creates a new list every time I click the button, it doesn't add the values on the same array

Collectives™ on Stack Overflow

Array not returning the expected output

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related