2016-11-16 3 views
0

객체 블록 내에서 정의 된 함수를 호출하려고하는데, 선택 필드 값이 변경 될 때만 호출합니다. 고려 studentJavascript "잡히지 않은 TypeError : 객체가 함수가 아닙니다."

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

+0

이 오류는 어떤 행에서 발생합니까? 디버거에서 코드를 추적 할 때'studRole'의 값은 무엇입니까? –

+0

학생 대상의 범위에 문제가있는 것은 아닌지, 어디에서 정의 했습니까? –

+5

'student'라는 HTML 요소와'student'라는 이름의 개체가 충돌합니다. HTML ID는 전역 개체에 저장됩니다. –

답변

1

window 범위에, 당신의 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>
0123로 참조 할 수 있습니다

+0

왜 그렇게해야합니까? –

0

당신은 당신이 first.You이 스크립트에 정의되지 않은 "테스트"함수를 호출된다 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(); 
} 
0

정의주십시오 함수를 호출하는 functionobject으로 호출해야합니다.

<!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> 
관련 문제