Javascript onchange function executes onload but not onchange

Question

My onchange function for this form select is executing onload but not when changing the selection in the form. I've tried using both onload and onclick.

I'm obviously only at the debugging implementation stage and will have it do other stuff once it works.

HTML:

<select case="sel1" name="Sort1" id="Sort1">
    <option value="0">Fred</option>
    <option value="1">Ginger</option>
    <option value="2">Judy</option>
    <option value="3">Gene</option>
</select>

JavaScript:

window.onload = function() {
    document.getElementById('Sort1').onchange = ChgSort();
}

function ChgSort() {
    alert(document.getElementById('Sort1').value);
}

When I load the page I get the alert popup with the current select value of 0. But when I click on the select field and change the option nothing happens.

I'm sure, and hope, it's something silly and stupid and I've just been staring and debugging the same function too long...

Help!

mostafa tourad · Accepted Answer · 2017-12-29 17:50:02Z

4

You will need to change on line this

        document.getElementById('Sort1').onchange = ChgSort();

to this

        document.getElementById('Sort1').onchange = ChgSort;

onchange should be function not the returned value look at the example below

window.onload = function() {
    document.getElementById('Sort1').onchange = ChgSort;
}

function ChgSort() {
    alert(document.getElementById('Sort1').value);
}

<select case="sel1" name="Sort1" id="Sort1">
    <option value="0">Fred</option>
    <option value="1">Ginger</option>
    <option value="2">Judy</option>
    <option value="3">Gene</option>
</select>

answered Dec 29, 2017 at 17:50

mostafa tourad

4,4181 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Derek Erb Over a year ago

Don't you hate it when that happens??? I knew it was something silly I had missed just staring and staring at the code.

mostafa tourad Over a year ago

A professional can make the same mistake , that's why we like to code you make the mistake and you have the option to fix it yourself as a champion :D

hurtbox · Accepted Answer · 2017-12-29 17:52:50Z

0

Your Javascript has:

window.onload = function() {
    document.getElementById('Sort1').onchange = ChgSort();
}

The window.onload should be changed to window.onchange and it should work

answered Dec 29, 2017 at 17:52

hurtbox

3861 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript onchange function executes onload but not onchange

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related