Index variable incorrect in onchange event

Question

I'm trying to attach onchange event to select tags. There are multiple tags in a div. So I'm using a for loop to attach events to each. What I want to do is to update a select tag inside another container. Basically it removes the "disabled" attribute from another select if user chooses an option other than default.

My problem is that the index variable, 'i' that is used in for loop is coming out incorrect while onchange triggers. The 'i' comes out to be what the last incremented value was. As if it is acting like a global static variable.

I don't know how to search for this question so I'm creating a new one. I hope someone can help.

here is the fiddle: http://jsfiddle.net/z3U3Y/

this is code:

var screenprint = document.getElementsByClassName('screenprint')[0];

var sp = screenprint.getElementsByClassName('placements')[0].getElementsByTagName('select');

for (var i = 0; i < sp.length; i++) {
sp[i].onchange = function(t){

    if(this.value!==0){
        screenprint.getElementsByClassName('color')[0].getElementsByTagName('select')[i].disabled= false;
    }
    else{
        screenprint.getElementsByClassName('color')[0].getElementsByTagName('select')[i].disabled= true;
    }

I'm still not able to figure out how to implement it in my case. But Thanks for the link. — Karan, Jun 25 '14 at 18:55

Felix Guo · Accepted Answer · 2014-06-25T19:35:23.770

1

if(this.value!==0){ is incorrect syntax. Should be if(this.value!=0){.

Also, when you open the Javascript console, it shows that : Uncaught TypeError: Cannot set property 'disabled' of undefined

Therefore there's an error with screenprint.getElementsByClassName('color')[0].getElementsByTagName('select')[i], I don't think you're correctly referencing the <select> tags.

<div class="color">
            <h3>No. of colors</h3>
            <label >For 1st placement</label>
            <select disabled name="color">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>

        </div>

I recommend you alert each step of the element navigation to see where it becomes null and fix it from there.

edited Jun 25 '14 at 19:35

answered Jun 25 '14 at 18:28

Felix Guo

2,700
14
20

Can you explain why it is incorrect syntax? – putvande Jun 25 '14 at 18:29
The !== operators performs a strict inequality comparisons. It does not attempt to convert the operands to compatible types before checking equality. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators – Upperstage Jun 25 '14 at 18:34
Yes, that's incorrect. Thanks for pointing it out. I'm used to strict tests now so I used that. Eventually it would have come out while testing. – Karan Jun 25 '14 at 18:57
@MrXenotype this is weird. I test for (value != 0) and it turns out false. But if I do "0" then it works. Any idea why? This is supposed to work. – Karan Jun 26 '14 at 05:41
1

Check the value of SP[1] it might be null – Felix Guo Jun 26 '14 at 15:24

Index variable incorrect in onchange event

1 Answers1