I am trying to trigger a function when value of input_1 textbox changes.

i.e. getElementById('input_1').onchange results in object is not a function.

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

}

I am trying to trigger a function when value of input_1 textbox changes.

i.e. getElementById('input_1').onchange results in object is not a function.

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

}

• javascript
• jquery
• html

• Why not <input type="text" id="input_1" form="game_form" value="x" onchange="doSomething(this)"> where this will be the target input. – Dhaval Marthak Commented Oct 20, 2014 at 8:21

7 Answers 7

You're using the wrong syntax. You want addEventListener

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

Or with jQuery:

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

The problem is that .onchange is property, not function.

You can, by the way, use jQuery .on() for this:

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

Or .change() shortcut for .on("change", ...:

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

If you somewhy want to use onclick instead of .change() and .addEventListener(), you can use it this way:

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

Fiddle.

Onchange is not a function, is a property. You must set onchange equal to the function you want.

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

You need to use jQuery selector to bind onchange or use javascript event binding method to achieve this.

So this would be $('#input_1').change(function() { });

OR

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

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

Try:

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

This will work!

As the question is tagged with jquery, you can use the following

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

Hope it helps...

Try this out...

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

Greetings