GetElementBy... FAIL - where's the mistake?

Question

Hi this is my code and html in jsfiddle...

http://jsfiddle.net/vp9V6/56/

and this is the .js:

    function itemManager(){
    var _me        = null;
    var _goldAsk   = 0;
    var _silverAsk = 0;
    var _eurusdAsk = 0;

    var construct = function(){
        //init here
        _me = $(this);
        _bindHandlers();
        _updateItem(125);
    }

    var _bindHandlers = function(){

        _me.on('stockupdated', function(){
            $('#gcost').text('Domanda oro: ' + (( _goldAsk / 31.1034768 ) / _eurusdAsk).toFixed(3) + ' Domanda argento: ' + (( _silverAsk / 31.1034768 ) / _eurusdAsk).toFixed(3) + ' Cambio €/$: ' + (_eurusdAsk).toFixed(3));
        });

        $('#calculate').on('click', function(){
            alert("item gold ask(" + _goldAsk + ") vs silver ask(" + _silverAsk + ")");
        });

        $('#updateitem').on('click', function(){
            _updateItem(250);
        });

       $('#btnGetTotalsGold').on('click', function(){
            var grammsOfGold   = $('#goldGramms').val().length   ? parseInt($('#goldGramms').val())   : 0;
            var carati = document.getElementById("carati").selectedIndex;

            $(".container-oro").text('Valutazione per ORO: ' + (((( _goldAsk / 31.1034768 ) / _eurusdAsk) * (document.getElementsByTagName("option")[carati].value)) * grammsOfGold ).toFixed(2) + ' Carati selezionati: ' + (document.getElementsByTagName("option")[carati].value))
        });        


    $('#btnGetTotalsSilver').on('click', function(){
            var grammsOfSilver = $('#silverGramms').val().length ? parseInt($('#silverGramms').val()) : 0;
            var millesimi = document.getElementById("millesimi").selectedIndex;

            $(".container-argento").text(' Valutazione per ARGENTO: ' + (((( _silverAsk / 31.1034768 ) / _eurusdAsk) * (document.getElementsByTagName("option")[millesimi].value)) * grammsOfSilver ).toFixed(2) + ' Titolo selezionato: ' + (document.getElementsByTagName("option")[millesimi].value))
        });        
    };


   var _updateItem = function(cost){
        $.ajax({
            type: 'POST',
            url: 'json.php',
            dataType: 'json',
            delay: 0,
            success: function(data){                
                _goldAsk   = parseFloat(data.GOLD.ask);
                _silverAsk = parseFloat(data.SILVER.ask);
                _eurusdAsk = parseFloat(data.EURUSD.ask);
                _me.trigger('stockupdated');
            }
        })
    }

    setInterval( _updateItem, 60000);
    construct();
}

window.onload = function(){
    var item = new itemManager();
}

When i calculate the Silver value clicking the "btnGetTotalsSilver" the script show the result getting the "option" value but doesn't match the right one, it get the gold select box value:

this: (document.getElementsByTagName("option")[carati].value))

not this: (document.getElementsByTagName("option")[millesimi].value))

why?

thanks

Answer 1

In the click function for btnGetTotalsSilver, millesimi is just a number. When the user selects the topmost option in the select, millesimi becomes 0, nothing else. So it is not intrinsically connected with that specific select element that happens to have "millesimi" for an id!

So, when you do document.getElementsByTagName("option") a while later, you get an array of all the options in the page. This array starts with the very first one (which is in the first select). So indexing with [millesimi] (if millesimi is 0) returns the first option in the first select.

Solution: get only the options from the proper select.
Use document.getElementById('millesimi').getElementsByTagName("option")
(or its jQuery equivalent.)

See new fiddle.

Edit: Oh, of course you should do the same for the other select(s) on the page if they have similar handlers.