Extracting values from and putting them into an array Asked Sep 09 '11 at 03:40 Active Sep 13 '11 at 01:50 Viewed 1,048 times 4 0 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> javascript arrays select edited Sep 09 '11 at 04:00 Singular1ty asked Sep 09 '11 at 03:40 Singular1ty 2,577 1 24 39 Why don't you want to use jQuery? And assigning to alert is a typo right? `alert=(x[i]);` – Thilo Sep 09 '11 at 03:43 I **have** to use javascript (long story), sorry. And why is `alert` wrong? – Singular1ty Sep 09 '11 at 03:43 1 jQuery *is* Javascript. And `alert(x[i])` looks more like what you want. Or maybe `console.log(x)` after the loop. – Thilo Sep 09 '11 at 03:44 *Ohhh*, fixing the alert now..Maybe it *was* working...? And I have to do all the programming myself, in pure Javascript. – Singular1ty Sep 09 '11 at 03:46 No, alert still doesn't work - must be my coding. – Singular1ty Sep 09 '11 at 03:46 selectbox.options.length will give you the number of options... – kennebec Sep 09 '11 at 03:52 Ok, more code added - sorry it's a bit long, but this should help everyone. – Singular1ty Sep 09 '11 at 04:00 2 Answers2 1 check this jsfiddle var selectbox = document.getElementById("selectBox"); var x = []; function calculate() { for (var i = 0; i <selectbox.options.length; i++) { x[i]=selectbox.options[i].value; alert(x[i]); } } calculate(); This will alert EVERY option element in the select. answered Sep 09 '11 at 03:51 Brian Glaz 15,468 4 37 55 Brian, that didn't work...I am calling calculate() from a button way above the script, so this should work..but it doesn't. – Singular1ty Sep 09 '11 at 03:54 do you get any errors? what happens? We might need to see more of the code. – Brian Glaz Sep 09 '11 at 03:56 Can you also alert(selectbox) to make sure that it really exists? – Thilo Sep 09 '11 at 03:56 No, the `` exists all right; it's ID is `selectBox` and I'm using the variable `var selectbox = document.getElementById("selectBox")` – Singular1ty Sep 09 '11 at 03:58

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.";