Question

Surely, this shouldn’t be so hard?

I have a <select>, which has, of course, <options>. These options are always in number format, because they are dynamically added to the list by the user.

I then need to get all of these options from the list, put them an array and then perform logic on the array. I’ve tried searching around, but everything relates to jquery or php – and I’m using plain old HTML and JavaScript.

The select is in a scrolling-box format:

<select id="selectBox" name="select" size="15" style="width:190px;">  
<!-- <options> are added via javascript -->     
</select>

Currently, I’m using this JavaScript to get the elements, but it’s not working:

//Calculate all numbers
        var x=[];
    function calculate()
    {
        for (var i = 0; i < 999; i++)
        {
            x[i]=selectbox.options[i].value;
            alert(x[i]);
        }

    }

Calculate() is called by a button. Something is going terribly wrong, and I can’t work it out. selectbox is previously defined as var selectbox = document.getElementById("selectBox"); and I know this works.

The alert is only being called so I can try to debug the thing…

I’m using the figure of 999 because I can’t work out how to get a number of how many elements are in the <select> (because it is in scrolling-box format).
The solution must be javascript, and the listbox must be in that scrolling-box format.

Thanks in advance for your help!

Edit — Okay, more coding to help this.

<form id="aggregateForm">
    <input id="inputNum" value="" type="text"><input id="addnum" value="Add" onclick="add();" type="button">
    <br>
    <select id="selectBox" name="select" size="15" style="width:190px;">  

    </select>
    <br>
    <input id="calculate" value="Calculate" onclick="calculate();" type="button"><input id="reset" value="Reset" onclick="reset();" type="button">
</form>

<script type="text/javascript">
    var selectbox = document.getElementById("selectBox");

    function add()
    {
    //Function to add a new number to the list of digits
    //Parses an integer to ensure everything works okay
    if(IsNumeric(document.getElementById("inputNum").value) == true)
    {
        selectbox.options[selectbox.options.length] = new Option(document.getElementById("inputNum").value, document.getElementById("inputNum").value);
        inputNum.focus();
    }
    else if(IsNumeric(document.getElementById("inputNum").value) == false)
    {
        alert("I'm sorry, but you have entered an invalid number. Please enter a number into the input box.");
        inputNum.focus();
    }
    }

    //Calculate all numbers
    var x=[];
    function calculate()
    {
    for (var i = 0; i <selectbox.options.length; i++)
        {
    x[i]=selectbox.options[i].value;
    alert(x[i]);
        }


    }

    //IsNumeric function coding taken from http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric, code by Joel Coehoorn
    function IsNumeric(input)
    {
        return (input - 0) == input && input.length > 0;
    }


</script>

Answer 1

The problem is that calculate is the ID of the element too. And oddly enough it believes that calculate is that DOM object not you function: proof. I changed the function name to calculates.

I only found out last week that you can reference your elements with IDs with said IDs.

<div id="really">Yep for some reason</div>

… later in javascript

// no document.getElementById, just
// let me be very clear, THIS IS WRONG TO USE VERY BAD SO EVERYONE CAN KNOW NOT TO USE THIS
// but it does work this way so be aware
really.innerHTML = "I guess he was right.";