0

I'm trying to use javascript function. My problem is that I get Uncaught ReferenceError: getExercies is not defined

Here is my code:

build_workout_functions.js file:

<script>
function getExercies()
{
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    var obj = JSON.parse(xmlhttp.responseText);
    select = document.getElementsByName('exericse');
    select.innerHTML = "";
    for (var i = 0, len = obj.length; i < len; i++)
    {
            var opt = document.createElement('option');
        opt.value = obj[i];
        opt.text = obj[i];
        select.appendChild(opt);
    }

    }
}
xmlhttp.open("POST","get_exercise_list.php",true);
var e = document.getElementsByName("muscles");
var strUser = e.options[e.selectedIndex].text;
xmlhttp.send('muscle=' + escape(strUser));

}
  </script>

The page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="styles.css" />

<script src="build_workout_functions.js"></script>


</head>

<body id="login-bg"> 

<div class="workout_table">

<select name="days">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
  <option value="F">F</option>
</select>

<select name="muscles" onchange="getExercies()">
  <option value="legs">legs</option>
  <option value="back">back</option>
  <option value="chest">chest</option>
</select>

<select name="exericse"><select>

</div>

</body>
</html>
2
  • instead of onchange,try onselect Commented Mar 1, 2014 at 10:39
  • xmlhttp.onreadystatechange=function() ? You are missing some {...} Commented Mar 1, 2014 at 10:45

2 Answers 2

2

You've got so many errors in your Javascript I don't know where to begin. First of all, you've got loads of syntax errors. You're missing the braces in the onreadystatechange function:

xmlhttp.onreadystatechange=function() {
   ...
}

Besides, document.getElementsByName() returns a NodeList, not a single element, so

var e = document.getElementsByName("muscles");
var strUser = e.options[e.selectedIndex].text;

causes an error because e.selectedIndex is undefined. You must use e[0].selectedIndex and e[0].options.

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

2 Comments

Who can I get reference to my select element? I set is name to be "muscles" so I should find him with getElementsByName?
I fixed to e[0].selectedIndex and e[0].options and its working, thanks!
0

If that is actually your Javascript file, you should remove the <script></script> tags, they are only needed in HTML.

function getExercies()
{
    var xmlhttp;

    xmlhttp=new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            var obj = JSON.parse(xmlhttp.responseText);

            select = document.getElementsByName('exericse');

            select.innerHTML = "";

            for (var i = 0, len = obj.length; i < len; i++) {
                var opt = document.createElement('option');
                opt.value = obj[i];
                opt.text = obj[i];
                select.appendChild(opt);
            }

        }
    }

    xmlhttp.open("POST","get_exercise_list.php",true);

    var e = document.getElementsByName("muscles");
    var strUser = e.options[e.selectedIndex].text;

    xmlhttp.send('muscle=' + escape(strUser));

}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.