CODEWITHSUNDEEP
javascript
Criousblack
Criousblack

Reputation: 3

Javascript "Uncaught TypeError: object is not a function"

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

Upvotes: 0

Views: 94

Answers (3)

user5093161
user5093161

Reputation:

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>

Upvotes: 0

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14624

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

Upvotes: 0

Darlesson
Darlesson

Reputation: 6162

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>

Upvotes: 1

Related Questions