I keep getting an error Uncaught TypeError: Cannot read property 'option' of null

Question

I am not sure what I did wrong. I am trying to make the first column display in my dropdown box but I keep generating an error. Can anyone see what I did wrong?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script type="text/javascript">
var select = document.getElementById("complaintType");
var maps = new Array();
maps[0] = ["Text A1", "Text A2", "Text A3"];
maps[1] = ["Text B1", "Text B2", "Text B3"];
maps[2] = ["Text C1", "Text C2", "Text C3"];
maps[3] = ["Text D1", "Text D2", "Text D3"];
maps[4] = ["Text E1", "Text E2", "Text E3"];
maps[5] = ["Text F1", "Text F2", "Text F3"];
for(var i=0; i < maps.length; i++) {
    var value = maps[i][0];
    //document.write((value)+"<br>"); 
    var option = document.createElement('option');
    option.text = maps[i];
    option.value = maps[i];
    select.option[select.option.length] = option;  
}
</script>
<body>
<select id="complaintType">
</select>
</body>
</html>

I tried that before and it generated Unable to get value of the property 'options': object is null or undefined — the_new_guy, Mar 24 '15 at 17:54
That's because you are running the script before the element has loaded. — Mathletics, Mar 24 '15 at 18:56

score 0 · Answer 1 · answered Mar 24 '15 at 19:00

Try this format instead. The issue is that you are calling your script before the element exists.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<select id="complaintType">
</select>

<script type="text/javascript">
var select = document.getElementById("complaintType");
var maps = new Array();
maps[0] = ["Text A1", "Text A2", "Text A3"];
maps[1] = ["Text B1", "Text B2", "Text B3"];
maps[2] = ["Text C1", "Text C2", "Text C3"];
maps[3] = ["Text D1", "Text D2", "Text D3"];
maps[4] = ["Text E1", "Text E2", "Text E3"];
maps[5] = ["Text F1", "Text F2", "Text F3"];
for(var i=0; i < maps.length; i++) {
    var value = maps[i][0];
    //document.write((value)+"<br>"); 
    var option = document.createElement('option');
    option.text = maps[i];
    option.value = maps[i];
    select.option[select.option.length] = option;  
}
</script>
</body>
</html>

Alternatively, if you wanted to keep your script at the top and if you are using jQuery you can insert the script inside:

$(document).ready(function(){ //insert script here });

to make sure it doesn't fire until the element you are targeting exists within the DOM.

If you do not want to use jQuery you can do something similar (but it doesn't work in IE8 or below) with:

document.addEventListener("DOMContentLoaded", function(event) { //insert script here });

score 0 · Answer 2 · answered Mar 24 '15 at 19:04

You have two issues. First, the code you're executing is running before the element you target exists. Second, use appendChild() to add the options to your select:

var select = document.getElementById("complaintType");
var maps = new Array();
maps[0] = ["Text A1", "Text A2", "Text A3"];
maps[1] = ["Text B1", "Text B2", "Text B3"];
maps[2] = ["Text C1", "Text C2", "Text C3"];
maps[3] = ["Text D1", "Text D2", "Text D3"];
maps[4] = ["Text E1", "Text E2", "Text E3"];
maps[5] = ["Text F1", "Text F2", "Text F3"];
for (var i = 0; i < maps.length; i++) {
    var value = maps[i][0];
    //document.write((value)+"<br>"); 
    var option = document.createElement('option');
    option.text = maps[i];
    option.value = maps[i];
    select.appendChild(option);
}

jsFiddle example

I keep getting an error Uncaught TypeError: Cannot read property 'option' of null

2 Answers2