Javascript "Uncaught TypeError: object is not a function"

Question

I am trying to call a function I defined within an object block, but only whenever a select field value is changed.

var student = {
  role: function() {
    var studRole = document.getElementById("student");
    var roleStud = studRole.options[studRole.selectedIndex].value;
    switch (roleStud) {
      case 'Admin':
        alert("Welcome Admin");
        break;
      default:
    }
  }
}

<form>
  <select id="countries" onchange="test()">
    <option value="France">France</option>
    <option value="Nigeria">Nigeria</option>
  </select>
  <br/>Student Role:
  <select id="student" onchange="student.role()">
    <option value="user">User</option>
    <option value="Admin">Admin</option>
  </select>
</form>

Fiddle Demo

On which line does this error occur? When you trace through your code in the debugger, what is the value of studRole? — user663031
– user663031, Commented Nov 16, 2016 at 6:25
Would most probably be a problem with scope of student object, where did you define that? — Sravan S
– Sravan S, Commented Nov 16, 2016 at 6:26
You have conflicting ids with the HTML element named student and the object named student. Remember HTML IDs are put on the global object. — user663031
– user663031, Commented Nov 16, 2016 at 6:29

Darlesson · Accepted Answer · 2016-11-16 06:26:14Z

1

Considering student is in the window scope, you can refer to it as in window.student.role()

var student = {
            role: function () {

                var studRole = document.getElementById("student");
                var roleStud = studRole.options[studRole.selectedIndex].value;

                switch (roleStud) {
                    case 'Admin':
                        alert("Welcome Admin");
                        break;
                    default:
                    }
                  }
                }

<form>
        <select id="countries" onchange="test()">
            <option value="France">France</option>
            <option value="Nigeria" >Nigeria</option>
        </select><br/>
        Student Role:
        <select id="student" onchange="window.student.role()">
            <option value="user">User</option>
            <option value="Admin" >Admin</option>
        </select>
</form>

answered Nov 16, 2016 at 6:26

Darlesson

6,2323 gold badges23 silver badges26 bronze badges

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

1 Comment

user663031 Over a year ago

Why would you need to do that?

Mairaj Ahmad · Accepted Answer · 2016-11-16 06:27:06Z

You need to call function with object you are calling it with a string

 <form>
        <select id="countries" onchange="test()">
            <option value="France">France</option>
            <option value="Nigeria" >Nigeria</option>
        </select><br/>
        Student Role:
        <select id="student" onchange="CheckRole()">
            <option value="user">User</option>
            <option value="Admin" >Admin</option>
        </select>
</form>
    <script>
var student = {
            role: function () {

                var studRole = document.getElementById("student");
                var roleStud = studRole.options[studRole.selectedIndex].value;

                switch (roleStud) {
                    case 'Admin':
                        alert("Welcome Admin");
                        break;
                    default:
                    }
                  }
}
function CheckRole() {
    student.role();
}

user5093161 · Accepted Answer · 2016-11-16 06:30:16Z

Please define your function first.You are calling a "test" function which is not defined in your script.

<!DOCTYPE html>
 <html>
 <head>
<style>
table, td, th {
border: 1px solid black;
 }

table {
  border-collapse: collapse;
  width: 100%;
}

th {
height: 50px;
}
</style>
</head>
 <body>

 <form>
    <select id="countries" onchange="test()">
        <option value="France">France</option>
        <option value="Nigeria" >Nigeria</option>
    </select><br/>
    Student Role:
    <select id="student" onchange="window.student.role()">
        <option value="user">User</option>
        <option value="Admin" >Admin</option>
    </select>
    </form>
    <script>

 function test(){
 var student = {
          role: function () {

            var studRole = document.getElementById("student");
            var roleStud = studRole.options[studRole.selectedIndex].value;

            switch (roleStud) {
                case 'Admin':
                    alert("Welcome Admin");
                    break;
                default:
                }
              }
            }
}
</script>
</body>
</html>

Collectives™ on Stack Overflow

Javascript "Uncaught TypeError: object is not a function"

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related