无法获取未定义或空引用的属性“未定义”

Question

I am having an issue with my code from javascript. When I hit the button the function runs, but nothing happens on the screen. I went into the development tools for IE, and noticed that when I ran the script I got the following: Unable to get property 'undefined' of undefined or null reference. This stems from a else statement in the script of:

function doSearch(){
    var selectedItem = document.getElementsByName("engines").selectedIndex;
    if (selectedItem == -1)
        alert("You must select a search engine.");
    else
        location.href = document.getElementsByName("engines").option[selectedItem].value + document.getElementById("searchTerm").value;
}

I believe the code in the html to be right, but it just doesn't seem to work. For example in the select list options for Google I have:

<option value="http://www.google.com/search?q=">Google</option>

Anyone have any thoughts on what I might be doing wrong?

Answer 1

If the select is

<select name="engines">

then you need

document.getElementsByName("engines")[0].selectedIndex

and

location.href = document.getElementsByName("engines")[0].option[selectedItem].value ...

since getElement s ByName returns a collection

If the select is

<select id="engines">

then you need

document.getElementById("engines").selectedIndex

Additionally I would use

if (selectedItem < 1)

if I had a "please select" since the user could select the first option

---

Here is how I would likely code it (NOTE: Google does not work in an iFrame, but bing does)

 window.onload=function() { document.getElementById("engines").onchange=function() { var engine = this.value; if (engine) { location.href = engine.replace("@",document.getElementById("searchTerm").value); } } } 

 <input id="searchTerm" type="text" /> <select id="engines"> <option value="">Please select</option> <option value="https://www.google.com/search?q=@">Google</option> <option value="https://www.bing.com/search?q=@">Bing</option> </select>