javascript - unable to add new data to a switch case based array

Question

Im having some troubles adding multiple values to a specific array slot based on a switch-case statement. Im able to retrieve data from the HTML drop down menu, im able to distinct between the selected elements, but im unable to add cumulative data in the same slot. Each new value overwrites the previous data instead of adding it.

here's the JS code:

function addData(category,cost)
        {
            var costsArr = [0,0,0,0];
            var cat = category.options[category.selectedIndex].text;
            var cos = parseInt(cost);
            console.log("category: "+cat+"; cost: "+ cos);

            switch(cat)
            {
                case "food":
                {
                    costsArr[0]+=cos;
                    console.log("cost in [0]: " +costsArr[0]);
                    console.log("food was selected");
                    break;
                }
                case "house holds":
                {
                    costsArr[1]+=cos;
                    console.log("cost in [1]: " +costsArr[1]);
                    break;
                }
                case "clothes":
                {
                    costsArr[2]+=cos;
                    console.log("cost in [2]: " +costsArr[2]);
                    break;
                }
                default:
                {
                    //something..
                }
            }
        }

HTML code:

<form name="inputForm">
     enter cost here<input type="text" id="costText">

     <select name="catDropMenu" id="catMenu">
         <option value="title" id="title">-- Choose category --</option>
         <option value="food" id="food">food</option>
         <option value="clothes" id="clothes">clothes</option>
         <option value="house" id="house">house holds</option>
         <option value="new" id="newCatID">New category</option>
     </select>

     <input type="button" name="addButton" value="Add" onclick="addData(document.getElementById('catMenu'),document.getElementById('costText').value)">

</form>

Answer 1

Change this

function addData(category,cost)
{
    var costsArr = [0,0,0,0];
    // body

to this

var costsArr = [0,0,0,0];
function addData(category,cost)
{
    // body

to make costsArr in the global scope such that it doesn't reset each time you call addData. The way it is currently written will reset each value to zero when you call addData because costsArr gets defined when the function is called. If defined in the function the costs array will be deleted from memory once the function ends.

Let Me Explain

Objects (or most variables in javascript including your cost array) are stored in memory and their corresponding variables only hold the location in memory that the corresponding objects exists at.

Something called the garbage collector removes objects from memory once no variables no longer know about it.

Thus consider the life of a function. Once it is finished, if no other functions are running in it's scope that can access the variables it defined, all that memory is now inaccessible. So the garbage collector deletes it. Hence why costsArr is deleted.

So to circumvent this you need either create a global variable, outside of the function, to create persistent data for that function.