getElementById onchange结果对象不是函数

我试图在input_1文本框的值发生更改时触发函数。getElementById onchange结果对象不是函数

即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>

的Javascript

$(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"); 

}

来源

2014-10-20 Damien

为什么不''这里'这将是目标输入。 – 2014-10-20 08:21:37

您使用的语法错误。你想addEventListener

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

或者使用jQuery：

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

来源

2014-10-20 08:22:27 Jivings

OP有jQuery - 更可能他想'.on（'change'，...）' – Alnitak 2014-10-20 08:23:16

@Alnitak补充说。干杯。 – Jivings 2014-10-20 08:23:55

_你想永远听起来像是命令（命令）和催眠之间的东西，不是吗？ :) – Regent 2014-10-20 08:35:24

你需要使用jQuery选择电平变化来绑定或使用JavaScript事件结合的方法来实现这一目标。

所以这将是$('#input_1').change(function() { });

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

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

来源

2014-10-20 08:20:44

的问题是，.onchange的属性，而不是功能。

你可以，顺便说一句，使用jQuery .on()此：

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

或者.change()快捷方式.on("change", ...：

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

如果somewhy要使用onclick代替.change()和.addEventListener()，你可以这样使用它：

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

Fiddle。

来源

2014-10-20 08:20:50 Regent

编码建议 - _always_使用'.on（'change'，...）'而不是'.change'，这样很明显这个调用是_registration_还是_trigger_（并且后者总是使用'.trigger'，太棒了！） – Alnitak 2014-10-20 08:25:30

太棒了，像魅力一样工作！谢谢！ – Damien 2014-10-20 08:27:00

@Alnitak好吧，我想你明白，对于那些知道有什么区别的人来说，这很明显，而其他人很可能不知道差异的存在。 – Regent 2014-10-20 08:31:06

尝试：

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

这将工作！

来源

2014-10-20 08:24:44 Somil

请解释OP的代码有什么问题，以及为什么通过编辑答案*解决了问题*。 – 2014-10-20 08:47:13

Onchange不是一个函数，是一个属性。你必须设置onchange等于你想要的功能。

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

来源

2014-10-20 08:27:19

随着问题被标记与jQuery，您可以使用以下

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

希望它可以帮助...

来源

2014-10-20 08:27:55 Mayank

尝试了这一点...

$(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>

问候

来源

2014-10-20 08:30:10 Bernd

getElementById onchange结果对象不是函数

回答

相关问题