Javascript Error: Missing Object (SelectedIndex Property)

Question

Javascript Error: Missing Object (SelectedIndex Property)

Struggling to find a solution for the mysterious "Object Expected" error that keeps popping up. Currently working on a concert attendance form page where users input their information. The pesky error is showing up in my function "totalBill," specifically with the objects "city" and "dates."

Frustratingly, the error rears its head at j=dates.selectedIndex; and k=city.selectedIndex;
I'll provide snippets of code that I suspect are related to the issue.

This snippet shows 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 form section of the body, the user selects 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>

javascript object selectedindex

Answer 1

Answer №1

Retrieve the elements using document.getElementById("dates") and then access its property:

document.getElementById("dates").selectedIndex

Keep in mind that you must either include the id attribute or obtain the element through another method, such as by name.

update

Here, it is crucial to retrieve the element and then manipulate its properties. Adding only the id "dates" will suffice, but I suggest utilizing getElementById() [or jQuery equivalent] for better code clarity.

Answer 2

Retrieve the elements using document.getElementById("dates") and then access its property:

document.getElementById("dates").selectedIndex

Keep in mind that you must either include the id attribute or obtain the element through another method, such as by name.

update

Here, it is crucial to retrieve the element and then manipulate its properties. Adding only the id "dates" will suffice, but I suggest utilizing getElementById() [or jQuery equivalent] for better code clarity.

Answer 3

Answer №2

Check out this initial JavaScript code snippet:

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>

Answer 4

Check out this initial JavaScript code snippet:

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>

Answer 5

Answer №3

@BIU If the OP's code is placed within a form named "coldplay", it should function correctly. You can view an example at jsfiddle.net/mn8vzbv2/2 However, while this solution may work, it is advised to avoid using with. Using IDs may not be the best approach as there could be multiple dropdowns on the page. IDs are not ideal for reusable code – Juan Mendes

Absolutely right! Thank you, Juan, for resolving this issue. It was simply a typo in the form name! A small mistake like that can really throw things off track, huh! Thanks once again.

Answer 6

@BIU If the OP's code is placed within a form named "coldplay", it should function correctly. You can view an example at jsfiddle.net/mn8vzbv2/2 However, while this solution may work, it is advised to avoid using with. Using IDs may not be the best approach as there could be multiple dropdowns on the page. IDs are not ideal for reusable code – Juan Mendes

Absolutely right! Thank you, Juan, for resolving this issue. It was simply a typo in the form name! A small mistake like that can really throw things off track, huh! Thanks once again.

Javascript Error: Missing Object (SelectedIndex Property)

Answer №1

Answer №2

Answer №3

Similar questions

Place the token within the Nuxt auth-module

What is the best way to extract HTML using selenium.webdriver in Python?

The POST method in Node JS request-promises does not properly handle string inputs

Sharing data between React JS components Passing information between different components in React JS

When using an HTML Select element with options loaded through Ajax, the desired item for selection is not being automatically selected

Angular5 causing all divs to have click events at once instead of individually triggered

Avoid executing top-level path middleware with app.use('/') in Express routing when directly accessing child or nested paths

Tips for resolving the error message 'Object(...) is not a function' when using ref().set() with Firebase

Use the jqwidgets jxGrid with the checkbox selection mode to enable row selection by checking for any clicks on the row

Due to high activity on the main thread, a delay of xxx ms occurred in processing the 'wheel' input event

Can JavaScript be used to retrieve time information from a central location?

Click event triggers dynamic function call

What is the best way to send my webform data to a web API controller as a model class using JQuery AJAX?

What is the process for setting up a resthook trigger in Zapier?

Adding External JS Files to a Node.js Project

Is react-particles-js still compatible for me to integrate?

Utilize prop-types inheritance when a component is rendered via props

Struggling with handling numbers and special symbols in the Letter Changes problem on Coderbyte

Implementing a document click event to reset timeouts using JQuery

Tips for simulating difficult private attributes within a class during unit testing in TypeScript