CODEWITHSUNDEEP
javascriptjquery
dasdasd
dasdasd

Reputation: 2031

Uncaught ReferenceError from external file javascript

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>

Upvotes: 0

Views: 578

Answers (2)

Oscar Paz
Oscar Paz

Reputation: 18292

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.

Upvotes: 2

Koen
Koen

Reputation: 557

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));

}

Upvotes: 0

Related Questions