Assign value to global variable

Question

After loading the page, I'd like to (re-)assign a value to a global variable. However, it doesn't change after the attempt.

The html is dynamically generated, and contains a select. Any option can be selected when it is generated, depending on the vehicle id stored in the database. I need the old (current) vehicle id to close it out when the vehicle is changed.

<select id="selVehicle">
    <option value="">&nbsp;</option>
    <option selected value='1'>9999</option>
    <option value='2'>9998</option>
    <option value='3'>9997</option>
</select>

In my .js file, I have the declaration of the global variable just before the document.ready():

var oldVehicle = -1;
$(document).ready(function () {
    $(":text").on("blur", function () {
        var tmp = ($(this).val());
        ($(this).val(tmp.toUpperCase()));
    });

    //lots more onblurs and onchanges//

    setOldVehicle();
});

function setOldVehicle() {
    oldVehicle = $('selVehicle option:selected').val();
    alert(oldVehicle);
}

When I run it, the alert still says "-1". How do I update the oldVehicle variable after the page is loaded?

`#selVehicle`, you didn't have the `#` so the selector didn't work. Also this will actually alert `undefined`. — Spencer Wieczorek, Jul 28 '17 at 15:00
Your first hint should be that it should never be "-1" let alone "still" -1. Test your selector in the browser: `$("selVehicle").length` - it will be zero. change the selector and try again `$("#selVehicle").length` and work from there. — freedomn-m, Jul 28 '17 at 15:00
I'd also suggest avoiding global variables. Retrieve values when you need them, and keep the scope to the minimum required. — Rory McCrossan, Jul 28 '17 at 15:01
@RoryMcCrossan: i use the variable in several other functions, and since the "old" value is lost on change, I couldn't think of another way to do it. — Bob Stout, Jul 28 '17 at 15:10
In which case you could try creating your own namespace to avoid polluting global variables: https://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript — Rory McCrossan, Jul 28 '17 at 15:14

score 1 · Accepted Answer · answered Jul 28 '17 at 14:59

1

Issue is here oldVehicle = $('selVehicle option:selected').val();

Since your using id you need to pass # for id selector

oldVehicle = $('#selVehicle option:selected').val();

answered Jul 28 '17 at 14:59

brk

48,835
10
56
78

score 1 · Answer 2 · answered Jul 28 '17 at 14:59

Your selector $('selVehicle option:selected').val(); is missing "#" for the ID of the element.

var oldVehicle = -1;
$(document).ready(function() {
  $(":text").on("blur", function() {
    var tmp = ($(this).val());
    ($(this).val(tmp.toUpperCase()));
  });

  //lots more onblurs and onchanges//
  setOldVehicle();
});

function setOldVehicle() {
  oldVehicle = $('#selVehicle option:selected').val();
  alert(oldVehicle);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selVehicle">
    <option value="">&nbsp;</option>
    <option selected value='1'>9999</option>
    <option value='2'>9998</option>
    <option value='3'>9997</option>
</select>

Ah, another OperatorHeadspaceAndTiming error strikes again. Either it's Friday, or I need to widen my blinders when I'm trying to track down problems like this. I was sure I was doing something wrong with the global variable, since I seldom use them. :/ — Bob Stout, Jul 28 '17 at 15:07

Assign value to global variable

2 Answers2