Javascript Error: Object Expected (using SelectedIndex Property)

Question

I can't seem to figure out a way around this vague "Object Expected" error. I am creating a page in which the user fills out a form to attend a concert. The error appears in my function "totalBill" and it has to do with the "city" and "dates" objects.

The error occurs at j=dates.selectedIndex; and k=city.selectedIndex;
I will include snippets of code that I think has to do with the error.

This is part of the function:

<script language="JavaScript" type="text/javascript">
    var city2=" ";
    var date2=" ";
    function totalBill() {
        with (document.coldplay) {
            var j;
            var k;

            j = dates.selectedIndex;
            k = city.selectedIndex;

            if (dates.options[j].value == "1") {
                date2 = " Friday, June 5th";
            }
            if (dates.options[j].value == "2") {
                date2 = " Saturday, June 6th";
            }

            if (city.options[k].value == "Chicago") {
                city2 = " Chicago";
            }
            if (city.options[k].value == "Austin") {
                city2 = "Austin";
            }

In the body (form) section, the user makes the selection of the city and date.

    <select name="city">
        City:
        <option value= "Chicago"> Chicago, Illinois 
        <option value= "Austin"> Austin, Texas 
        <option value= "Miami"> Miami, Florida  
    </select><br>
</td>
<td>
    <select name="dates">
        Date:
        <option value= "1"> Friday, June 5th 
        <option value= "2"> Saturday, June 6th
        <option value= "3"> Friday, June 12th  
        <option value= "4"> Saturday, June 13th
        <option value= "5"> Friday, June 19th 
        <option value= "6"> Saturday, June 20th
        <option value= "7"> Friday, June 26th  
        <option value= "8"> Saturday, June 27th
    </select>

Good point. How should I go about defining those objects? Pardon my ignorance — pmcg521, May 19 '15 at 19:25
@BIU `dates` is relying on the `with` above it. It could be replaced with `document.coldplay`. Note that most JS developers stay away from `with` unless you really know what you're doing. http://stackoverflow.com/questions/61552/are-there-legitimate-uses-for-javascripts-with-statement — Ruan Mendes, May 19 '15 at 19:33
still isn't defined even with `with` because it's got a name but no id — BIU, May 19 '15 at 19:34
@itr_patrick Is this HTML wrapped in a form with name `coldplay` ? — Ruan Mendes, May 19 '15 at 19:35
@BIU elements with names in forms automatically become a property of the form. This is assuming that there is a form element with `name="coldplay"` — Ruan Mendes, May 19 '15 at 19:35
@BIU The OP's code should work if it's within a form named coldplay. See http://jsfiddle.net/mn8vzbv2/2 However, even if it should work, I would still suggest staying away from `with`. Using IDs is not a very good solution because it sounds like there could be multiple dropdowns on the page. IDs are usually a poor solution if you want your code to be reusable — Ruan Mendes, May 19 '15 at 19:48

BIU · Answer 1 · 2015-05-19T19:33:01.890

0

Get the objects by document.getElementById("dates") and then get the property of that: document.getElementById("dates").selectedIndex

Note that you'll have to either add the id attribute or get the element some other way, though (by name, etc.)

edit

What you need here is to get the element and then accesses its property. If you add just the id of "dates" (instead of only the name) that will work as well - though I recommend using the getElementById() [or jQuery equivalent] for readability.

edited May 19 '15 at 19:33

answered May 19 '15 at 19:27

BIU

2,340
3
17
23

that's why I wrote "Note that you'll have to either add the id attribute or get the element some other way" – BIU May 19 '15 at 19:33
@JuanMendes you're right, I took his code and without being wrapped in a `coldplay` form it only worked with the id, not the name. the OP didn't include that in the code – BIU May 19 '15 at 19:46
my point is that he needs to get the element in order to access the property. Whichever way that is - to correctly wrap it in a form, to explicitly get it by id, etc - the point is that he's getting the error because the element isn't being found by the JS – BIU May 19 '15 at 19:48
1

@BIU Yes, and we need more info from the OP to be able to ascertain the problem... – Ruan Mendes May 19 '15 at 19:49
I appreciate the responses and support, everyone. I do in fact have multiple drop downs on the page, and I am not interested in using the `id` attribute as a workaround. – pmcg521 May 20 '15 at 02:59

score 0 · Answer 2 · answered May 19 '15 at 19:47

Here is start code with pure JavaScript :

var city2 = " ";
var date2 = " ";

function totalBill() {
  var date = document.getElementById("date");
  var date2 = date.options[date.selectedIndex].text;

  var city = document.getElementById("city");
  var city2 = city.options[city.selectedIndex].value;

  alert("City : " + city2 + "\nDate: " + date2);
}

function addListener() {
  document.getElementById("submit").addEventListener("click", totalBill);
}

<body onload='addListener()'>
  <table>
    <tr>
      <td>City:
        <select name="city" id="city">
          <option value="Chicago">Chicago, Illinois</option>
          <option value="Austin">Austin, Texas</option>
          <option value="Miami">Miami, Florida</option>
        </select>
      </td>
      <br>
      <td>Date:
        <select name="date" id="date">
          <option value="1">Friday, June 5th</option>
          <option value="2">Saturday, June 6th</option>
          <option value="3">Friday, June 12th</option>
          <option value="4">Saturday, June 13th</option>
          <option value="5">Friday, June 19th</option>
          <option value="6">Saturday, June 20th</option>
          <option value="7">Friday, June 26th</option>
          <option value="8">Saturday, June 27th</option>
        </select>
        <td/>
        <br>
    </tr>
  </table>
  <button id="submit">Calculate</button>
  </bod>

An answer should explain what is the problem with the OP's code, not just use a different solution altogether without any explanation — Ruan Mendes, May 19 '15 at 19:48
The HTML, though invalid would not cause the problem, so your explanation is invalid and does not show an understanding of the OP's problem, just a workaround using IDs as was suggested by BIU See http://jsfiddle.net/mn8vzbv2/3/ — Ruan Mendes, May 19 '15 at 20:45

score 0 · Answer 3 · answered May 20 '15 at 03:21

@BIU The OP's code should work if it's within a form named coldplay. See jsfiddle.net/mn8vzbv2/2 However, even if it should work, I would still suggest staying away from with. Using IDs is not a very good solution because it sounds like there could be multiple dropdowns on the page. IDs are usually a poor solution if you want your code to be reusable – Juan Mendes

This is correct! Thank you, Juan, for solving this issue. It turns out that I misspelled the form name! One small syntax error could really cause some problems, huh! Thanks again.

Javascript Error: Object Expected (using SelectedIndex Property)

3 Answers3