Changing the displayed item on a HTML dropdown list using Javascript

Question

I'm making an app for the overwolf app contest( http://www.overwolf.com/nvidia-app-challenge/ ) and in the options page, I want to be able to store the options in localStorage so I can access it from any page, at any time.

Here is my HTML page:

<!DOCTYPE html>
    <html>
        <head> 
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Battle Stats</title>
            <link type="text/css" rel="stylesheet" href="style.css">
            <script type="text/javascript" src="windowManagement.js"></script>
        <script>
            function toggleDisabled(_checked) {
                document.getElementById('warnValue').disabled = _checked ? true : false;
            }

            //init
            var ddl = document.getElementById('options_class');
            var length = 5
            for (var i = 0; i < length; i++){
                if (ddl.options[i].value == localStorage.getItem("options_playerClass")){
                    ddl.options[i].selected = true;
                    break;
                }
            }

            function setLocalStorageData()
            {
                var playerClass = '';
                playerClass = document.getElementById("options_class").value;
                localStorage.setItem("options_playerClass", playerClass);
                alert(localStorage.getItem("options_playerClass"));
            }
        </script>
        </head>
        <body>
            <div onmousedown="dragResize('BottomRight');">
                <div id="content" onmousedown="dragMove();">
                    <div class="outlined">
                        <h1>Options</h1>
                        <form>
                            <p id="output"></p>
                            <input type="checkbox" name="options_battleStats" value="Battle Stats">Show Battle Stats<br>
                            <input type="checkbox" name="options_healthWarning" value="Health Warning" onchange="toggleDisalbled(this.checked);">Low Health Warning
                            <div class="optionInner">
                                <p> Warn me at:
                                    <input type="number" name="points" min="0" max="100" step="10" value="30" class="optionValue" id="warnValue">
                                </p>
                                <p>Class:
                                    <select name="options_class" id="options_class" class="optionValue">
                                        <option value="smg">SMG</option>
                                        <option value="plasma">Plasma Bomber</option>
                                        <option value="medic">Medic</option>
                                        <option value="rail">Rail</option>
                                        <option value="tesla">Tesla</option>
                                    </select>
                                </p>
                            </div>
                        </form>
                    </div>
                    <p><a href="index.html" class="actionButton Left">Close</a><span class="actionButton Middle" onclick="setLocalStorageData();">Save</p></p>
                </div>
            </div>
        </body>
    </html>

The error message is:

Uncaught TypeError: Cannot read property 'options' of null

Any help is appreciated!

Answer 1

JavaScript is getting executed prior to dom objects load. Place the entire script block at the end of the page:

<script type="text/javascript">
//All your code here
</script>
</body>
</html>

Answer 2

Your javascript is loaded before the DOM is loaded.

 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Battle Stats</title> <link type="text/css" rel="stylesheet" href="style.css"> <script type="text/javascript" src="windowManagement.js"></script> </head> <body> <div onmousedown="dragResize('BottomRight');"> <div id="content" onmousedown="dragMove();"> <div class="outlined"> <h1>Options</h1> <form> <p id="output"></p> <input type="checkbox" name="options_battleStats" value="Battle Stats">Show Battle Stats<br> <input type="checkbox" name="options_healthWarning" value="Health Warning" onchange="toggleDisalbled(this.checked);">Low Health Warning <div class="optionInner"> <p> Warn me at: <input type="number" name="points" min="0" max="100" step="10" value="30" class="optionValue" id="warnValue"> </p> <p>Class: <select name="options_class" id="options_class" class="optionValue"> <option value="smg">SMG</option> <option value="plasma">Plasma Bomber</option> <option value="medic">Medic</option> <option value="rail">Rail</option> <option value="tesla">Tesla</option> </select> </p> </div> </form> </div> <p><a href="index.html" class="actionButton Left">Close</a><span class="actionButton Middle" onclick="setLocalStorageData();">Save</p></p> </div> </div> <script> function toggleDisabled(_checked) { document.getElementById('warnValue').disabled = _checked ? true : false; } //init var ddl = document.getElementById('options_class'); var length = 5 for (var i = 0; i < length; i++){ if (ddl.options[i].value == localStorage.getItem("options_playerClass")){ ddl.options[i].selected = true; break; } } function setLocalStorageData() { var playerClass = ''; playerClass = document.getElementById("options_class").value; localStorage.setItem("options_playerClass", playerClass); alert(localStorage.getItem("options_playerClass")); } </script> </body> </html>

Changing the displayed item on a HTML dropdown list using Javascript

Question

2 answers

solution1
0 2015-11-11 20:10:24

solution2
0 ACCPTED 2015-11-11 20:15:48

Changing the displayed item on a HTML dropdown list using Javascript

Question

2 answers

solution1 0 2015-11-11 20:10:24

solution2 0 ACCPTED 2015-11-11 20:15:48

solution1
0 2015-11-11 20:10:24

solution2
0 ACCPTED 2015-11-11 20:15:48