Javascript function not loading, no errors shown in chrome developer console

Question

I am trying to create a simple javascript function which will populate 2 dropdown boxes, one for age and the other for gender.

However,the functions are not working and i cant seem to figure out why.Any help would be appreciated.

Code:

    <head>

<script type="text/javascript">

    function AgeDropDown(){
        var list=getElementById(UserProfileAge);
        for(var i=1;i<100;i++)
        {
            var opt = document.createElement("option");
            opt.value= i;
            UserProfileAge.appendChild(opt);
        }
    }

    function genderlist(){
        var choices=new array["M","F"];
        for(i=0;i<choices.length;i++)
        {
            var opt = document.createElement("option");
            opt.value= i;
            UserProfileGender.appendChild(opt);
        }
    }

</script>

</head>
<body>
<?php
include("usermenubar.inc");
?>
<form id='UserProfile' name='UserProfile' method='POST' action='editdetails.php'>


<div class='UserDetails'><!--dropdown-->
    Age:<select id='UserProfileAge' name='UserProfileAge' onclick='AgeDropDown'>
    <option value=''>Please enter your age</option>
    </select>
</div>

<div class='UserDetails'><!--Dropdown-->
    Gender:<select id='UserProfileGender' name='UserProfileGender' onclick="genderlist">
    <option value=''>Please enter your gender</option>
    </select>
</div>


<input type='submit' name='UserProfleSubmit' value='Save Changes'/>
</form>
</body>
</html>

try with AgeDropDown() and genderlist() in html "onclick"

ZiTAL
– ZiTAL

2013-10-20 11:04:01 +00:00
Commented Oct 20, 2013 at 11:04 — ZiTAL
– ZiTAL, Commented Oct 20, 2013 at 11:04

Ritesh A · Accepted Answer · 2013-10-20 11:40:06Z

1

This can help:

function load(){
    AgeDropDown();
    genderlist();
    }

 function AgeDropDown(){
        var list=document.getElementById("UserProfileAge");
        for(var i=1;i<100;i++)
        {
            var opt = document.createElement("option");
            opt.value= i;
            list.appendChild(opt);
        }
  }

    function genderlist(){
        var choices=new array["M","F"];
        for(i=0;i<choices.length;i++)
        {
            createOption(document.getElementById("UserProfileGender"));
        }
    }

edited Oct 20, 2013 at 11:40

answered Oct 20, 2013 at 11:25

Ritesh A

2831 gold badge2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kenneth .J Over a year ago

I've tried what you've listed, but am still getting the an Uncaught ReferenceError:getElementById is not defined. Upon clicking it, it points to AgeDropDown,load and onload. i have no idea why its being undefined when it already is..

Ritesh A Over a year ago

The first line inside AgeDropDown() should be var list=document.getElementById("UserProfileAge");

Alon Catz · Accepted Answer · 2013-10-20 11:09:47Z

0

Your functions are loading, but they are never executed because they are never called. You have to call the function at some point in your html file. The best practices it to run initialization code like on onload event of the page.

<script>
function load()
{
  AgeDropDown();
  genderlist()
}
... 
</script>



<body onload="load()">

edited Oct 20, 2013 at 11:09

answered Oct 20, 2013 at 11:04

Alon Catz

2,5501 gold badge22 silver badges24 bronze badges

4 Comments

Kenneth .J Over a year ago

HI Alon, Thanks for taking the time to answer, i've edited my code with your suggestions. HOwever, upon loading the page and clicking on the selects i am getting an uncaughtreferenceerror for the onclicks. Any ideas why this is so?

Ritesh A Over a year ago

var list=getElementById(UserProfileAge); should be var list=getElementById("UserProfileAge");

John Dvorak Over a year ago

@ken please don't do that - don't overwrite your question with a new one. Even appending a new question to another one is bad practice.

Alon Catz Over a year ago

See the comment from Ritesh. He is right. Also, remove the onclick from both the <select> tags. You don't need it there. The data has already been loaded in the "load" function Also use document.getElementById instead of just getElementById

Collectives™ on Stack Overflow

Javascript function not loading, no errors shown in chrome developer console

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related