getElementById onchange 결과 객체가 함수가 아닙니다.

Question

input_1 텍스트 상자의 값이 변경되면 함수를 트리거하려고합니다.

즉 getElementById ('input_1') .onchange 결과 객체는 함수가 아닙니다.

HTML

<form method="GET" id="game_form"></form> 
<table border="1" style="background-color:#FFFFCC;border-collapse:collapse;border:1px solid #FFCC00;color:#000000;width:100" cellpadding="3" cellspacing="3"> 
    <tr> 
    <td id="cell_1"><input type="text" id="input_1" form="game_form" value="x"></td> 
    <td id="cell_2"><input type="text" id="input_2" form="game_form"></td> 
    <td id="cell_3"><input type="text" id="input_3" form="game_form"></td> 
    </tr> 
    <tr> 
    <td id="cell_4"><input type="text" id="input_4" form="game_form"></td> 
    <td id="cell_5"><input type="text" id="input_5" form="game_form"></td> 
    <td id="cell_6"><input type="text" id="input_6" form="game_form"></td> 
    </tr> 
    <tr> 
    <td id="cell_7"><input type="text" id="input_7" form="game_form"></td> 
    <td id="cell_8"><input type="text" id="input_8" form="game_form"></td> 
    <td id="cell_9"><input type="text" id="input_9" form="game_form"></td> 
    </tr> 
</table> 

자바 스크립트

$(window).load(
    function checkInput() { 
//  alert("I am an alert box!1"); 
     var cell = document.getElementById('input_1'); 
     alert(cell.value); 
     **document.getElementById('input_1').onchange**(
      doSomething() 
     ); 
    } 
); 


function doSomething(){ 
    alert("I am an alert box!2"); 

} 

Answer 1

잘못된 구문을 사용하고 있습니다. 당신은

var el = document.getElementById("input_1"); 
el.addEventListener("change", doSomething, false); 

또는 jQuery로 addEventListener

원하는 :

var $el = $('#input_1'); 
$el.on('change', doSomething); 

Answer 2

당신은 onchange를 결합하거나이를 달성하기 위해 방법을 결합 자바 스크립트 이벤트를 사용하는 jQuery를 선택기를 사용해야합니다.

그래서이 될 것 $('#input_1').change(function() { });

또는

var myEl = document.getElementById('input_1'); 

myEl.addEventListener('change', function() { 
    // do something 
}, false); 

Answer 3

문제는 .onchange 재산, 작동하지 것입니다.

당신은, 그런데, 이것에 대한 jQuery를 .on()를 사용할 수 있습니다 .on("change", ...에 대한

$('#input_1').on("change", function() 
{ 
    doSomething(); 
}); 

또는 .change() 바로 가기 :

$('#input_1').change(function() 
{ 
    doSomething(); 
}); 

대신 .change() 및 .addEventListener()의 onclick를 사용하려면 somewhy 경우, 다음과 같이 사용할 수 있습니다.

document.getElementById('input_1').onchange = doSomething; 

Fiddle.

Answer 4

시도 :

$('#input_1').change(function(){ 
    alert('changed'); 
}); 

이 작동합니다!

Answer 5

Onchange는 기능이 아니며 속성입니다. 원하는 기능과 동일한 onchange를 설정해야합니다. 문제가 JQuery와 태그됨에 따라

document.getElementById('input_1').onchange = function(){ 
//Do what you want 
} 

Answer 6

, 당신은

Answer 7

이 밖으로 시도 ... 다음

$(document).ready(function(){ // when all DOM is loaded 
    $('#input_1').on('change',function(){ // # is id based selector 
     // you event handler logic 
    }); 
}); 

는 희망이 도움이 사용할 수 있습니다 ...

$(document).ready(function(){ // When DOM is ready... 
 
\t $('input').on('change',function(){ // Every Input field would get into this Event... to change only for id=input_1 -> '#input_1' 
 
\t \t //Alternative to 'change' would be 'keyup', because change is only called when the input field losts his focus... 
 
\t \t alert(this.id); 
 
\t \t switch(this.id) 
 
     { 
 
      case 'input_1': alert('input 1!'); 
 
       break; 
 
      case 'input_2': alert('input 2!'); 
 
       break; 
 
      //.... 
 
     } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" style="background-color:#FFFFCC;border-collapse:collapse;border:1px solid #FFCC00;color:#000000;width:100" cellpadding="3" cellspacing="3"> 
 
    <tr> 
 
    <td id="cell_1"><input type="text" id="input_1" form="game_form" value="x"></td> 
 
    <td id="cell_2"><input type="text" id="input_2" form="game_form"></td> 
 
    <td id="cell_3"><input type="text" id="input_3" form="game_form"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cell_4"><input type="text" id="input_4" form="game_form"></td> 
 
    <td id="cell_5"><input type="text" id="input_5" form="game_form"></td> 
 
    <td id="cell_6"><input type="text" id="input_6" form="game_form"></td> 
 
    </tr> 
 
    <tr> 
 
    <td id="cell_7"><input type="text" id="input_7" form="game_form"></td> 
 
    <td id="cell_8"><input type="text" id="input_8" form="game_form"></td> 
 
    <td id="cell_9"><input type="text" id="input_9" form="game_form"></td> 
 
    </tr> 
 
</table>

인사