getElementById onchange results in对象不是函数

getElementById onchange results in object is not a function

本文关键字：函数 对象 in onchange results getElementById      更新时间：2023-09-26

当input_1文本框的值更改时，我正在尝试触发一个函数。

即getElementById（'put_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");
}

您使用了错误的语法。您想要addEventListener

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

或者使用jQuery:

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

问题是.onchange是属性，而不是函数。

顺便说一句，你可以使用jQuery.on（）来实现这一点：

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

或者.on("change", ...:的.change（）快捷方式

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

如果你想使用onclick而不是.change()和.addEventListener()，你可以这样使用：

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

Fiddle。

Onchange不是一个函数，而是一个属性。必须将onchange设置为所需的函数。 
document.getElementById('input_1').onchange = function(){
//Do what you want
}

您需要使用jQuery选择器来绑定onchange，或者使用javascript事件绑定方法来实现这一点。

这就是$('#input_1').change(function() { });

或

var myEl = document.getElementById('input_1');
myEl.addEventListener('change', function() {
   // do something
}, false);

尝试：

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

这会奏效的！

由于问题用jquery标记，您可以使用以下

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

问候

相关文章：