CODEWITHSUNDEEP
javascript
jimw
jimw

Reputation: 19

JavaScript function doesn't work with variable declared before function

I'd like to declare one or more variables before my function but when I do the function fails to work. I understand that variables declared inside a function are local variables that only work in the scope of the function. Why will my variable not work as a 'global' variable outside/before my function?

<script type="text/javascript">
   var visitors = document.getElementById('tb254597').value;
   function limitVisitors() {
       if ( visitors > 60 ) {
          alert("We can only accommodate 60 people on a group visit. You entered " + visitors + " visitors.");
       }
   }
</script>

Upvotes: 1

Views: 1327

Answers (4)

Ryan Ginnow
Ryan Ginnow

Reputation: 83

It depends on how you're calling the function. Either way, you have to pass the variable into the function in order for the function to know your value.

Somewhat similar to this:

<script type="text/javascript">
  // this parameter can be named whatever
  function limitVisitors(param1) {
    if ( param1 > 60 ) {
      alert("We can only accommodate 60 people on a group visit. You entered " + param1 + " visitors.");
    }
  }

  // Just make sure that this value gets passed to the function like this
  var visitors = document.getElementById('tb254597').value;
  limitVisitors(visitors);
</script>

And you may want to consider jQuery so that you can use the $(document).ready() function in order to run when the DOM actually loads. If you're going to allow for user input, you may want to have a event binding like a button click.

EDIT: Since you're using onchange in your HTML element, this should be all you need. Note the change in the function call:

<input type="text" name="Field_Number_of_visitors" size="20" id="tb254597" onchange="limitVisitors(this.value);" />

<script type="text/javascript">
  // this parameter can be named whatever
  function limitVisitors(param1) {
    if ( param1 > 60 ) {
      alert("We can only accommodate 60 people on a group visit. You entered " + param1 + " visitors.");
    }
  }
</script>

Upvotes: 0

Valter J&#250;nior
Valter J&#250;nior

Reputation: 948

I think you should do this:

       function limitVisitors() {
           var visitors = parseInt(document.getElementById('tb254597').value);
           if ( visitors > 60 ) {
              alert("We can only accommodate 60 people on a group visit. You entered " + visitors + " visitors.");
           }
       }

Every time you call limitVisitors you will get the value and compare.

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386530

  1. Move the variable declaration and initalization inside the function, because you get the initial value from it at start and not the actual value.

    If you need the variable not outside the function, it is better to keep it inside the function.

  2. Change the value to a number with parseInt(), because you get a string from an input.

  3. Call the function limitVisitors() somewhere, probably at submit.

function limitVisitors() {
    var visitors = parseInt(document.getElementById('tb254597').value, 10);
    if ( visitors > 60 ) {
        alert("We can only accommodate 60 people on a group visit. You entered " + visitors + " visitors.");
    }
}

limitVisitors();

Upvotes: 4

Mike Cluck
Mike Cluck

Reputation: 32511

You're grabbing the value of tb254597 as soon as the page loads. This is going to be an empty string (''). You need to grab that value every time you want to check it.

Think of it as you write down a friends address. You've got their address at the time that you wrote it down. But what happens if they move? You're not going to find your friends if you go to the old address. Always check that you've got your friends latest address.

Upvotes: 0

Related Questions