console.log not working for jQuery? [duplicate]

Here is my jQuery at the bottom of html page:

<script src="" type="text/javascript"> $(document).ready(function () { $('#login').click(function() { var co_id = $('#companies').val(); console.log(co_id); }); }); </script>

When I type this jQuery into the console, then type co_id it works, but when I run this in browser and choose a company and click the correct button, and I would assume when I type co_id into chrome browser console, it would show my option value? But it is coming back as:

>co_id
ReferenceError: co_id is not defined

Here is html:

<select name=""> <option value="--">--</option> <option value="1">Company</option> <option value="2">Company2</option> <option value="3">Company3</option> <option value="68">Company4</option> <option value="69">Company5</option> <option value="70">Company6</option>
</select><input type="submit" value="Login">

2 Answers

Don't write code if you set the src attribute.

 <script src="" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () { $('#login').click(function() { var co_id = $('#companies').val(); console.log(co_id); });
});
</script>

Your problem is, that the Chrome console is always running in the global scope but co_id is scoped to the closure.

To inspect the values you have 3 options:

1. Declare co_id to be in the global scope. To do this simply remove the var in front of the variable name and add var co_id in the global scope. I don't recommend this, inevitably you'll forget to make the scope local again and you'll end up with a lot of global variables. They can be a source of a lot of fun bugs.

2. Change the console.log() to actually output the variable content like this: console.log(co_id);.

3. The best solution: Set a break point in the function by clicking on the line number in the script pane.