jquery - using it on an input field - can't get variable out of function so I can use it

Question

The first time I try to use my jQuery lessons on a real web page, I find that the variable guess (inside the scope of this inner function) disappears as soon as the function completes.

This is normal javascript behavior, I suppose, but how does one usually grab hold of the variable so one can use it in other functions? My lessons never covered that.

I assumed that once guess was routed into the innerHTML of #display, it would stick. But it's even disappearing from there.

?

<!DOCTYPE html>
<html>
    <HEAD>
        <title>Game of the Century</title>
        <meta charset="UTF-8">
        <LINK href="reset.css" rel="stylesheet" type="text/css">
        <LINK href="main.css" rel="stylesheet" type="text/css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="application.js"></script>
    </HEAD>

    <body>
        <form>
            <input type='text' name = "input" id = "input"><br>
            <input type='submit' id="submit">
        </form>
        <p id = "display"></p>   
        <div>
            <img src="http://img707.imageshack.us/img707/2403/rj1a.jpg" alt = "ad">
        </div>
    </body>
</html>

...

$(document).ready(function () {

        $('#submit').click( function() { 
              var guess = $('#input').val();
              $("#display").html(guess);
         });   

});

Can you add your HTML? Also, if your using jQuery why use document.getelementbyid? — buzzsawddog, Nov 29 '13 at 21:03
Why don't you declare the variable outside the click's function scope? — Adonis K. Kakoulidis, Nov 29 '13 at 23:25

score 3 · Accepted Answer · answered Nov 29 '13 at 21:08

3

This is absolutely normal and it is not related to jQuery. Your guess variable is defined in a closure, anonymous function. So, it lives there and it is not accessible outside of that scope. If you want to use guess outside the click handler, just define it outside. For example:

$(document).ready(function () {
    var guess;
    $('#submit').click( function() { 
        guess = $('#input').val();
        $("#display").html(guess);
    });   
    var anotherMethod = function() {
        alert(guess); // <--- it works
    }
});

Also, you don't need to use document.getElementById if you already include jQuery.

Edit: I just saw the html. There is another side effect of the code. Your form is actually submitting when you click the button. Try changing the type="submit" to "type="button" or some other way to prevent the form submitting.

answered Nov 29 '13 at 21:08

Krasimir

13,306
3
40
55

Oops - I actually did have my guess variable pre-defined before I pasted my code here. It was the "submit" that was screwing things up. So with only one input field I probably don't even need the
section at all? A quick hint why "submit" was throwing away my data?
– dwilbank Nov 29 '13 at 21:14
What it happens is that the form is submitted, which means that the page is reloaded. If you test on localhost that happens really fast. – Krasimir Nov 29 '13 at 21:23
so "submit" is beginning to sound like a method to avoid in modern web design? (looking for some rules of thumb) – dwilbank Nov 29 '13 at 21:24
If you use `type='submit'` inside a form it triggers the submitting. So, simply change it to `button`. There are some methods to prevent the default behavour -> http://stackoverflow.com/questions/8664486/javascript-to-stop-form-submission – Krasimir Nov 29 '13 at 22:00

score 2 · Answer 2 · answered Nov 29 '13 at 21:21

Just here my solution with perhaps a better split of read/write tasks

    $(document).ready(function () {

        getMyHtml = function() {
            return $('#input').val();
        }

        setMyHtml = function () {
            var s = getMyHtml();
            $("#display").html(s);
        }

        $('#submit').click(setMyHtml);
    });

jquery - using it on an input field - can't get variable out of function so I can use it

2 Answers2