Question

I have a little problem with following code, it throws a error saying that the vars startPos and refresh cannot be found.

var listElem = document.getElementById('list');
listElem.addEventListener('touchstart', function(e) {
    var startPos = $("#content").scrollTop(),
    eraInput = document.getElementById('input'),
    refresh = false;
});
listElem.addEventListener('touchend', function(e) {
    if (refresh) {
        if (!$("#input").is(":focus")) {
            $("#input").val("");
        }
        // Stuff...
    }
});
listElem.addEventListener('touchmove', function(e) {
    var move_to = startPos-(e.touches[0].clientY-e.changedTouches[0].screenY);
    if (move_to > 50) {
        refresh = true;
    } else {
        refresh = false;
    }
});

Answer 1

Every function definition creates its own scope in JavaScript. That means you can’t declare a variable inside a function an use it inside another function. When you need shared variables, they need to be declared on a common scope:

var listElem = document.getElementById('list'),
    startPos,
    refresh,
    eraInput;
listElem.addEventListener('touchstart', function(e) {
    startPos = $("#content").scrollTop(),
    eraInput = document.getElementById('input'),
    refresh = false;
});
listElem.addEventListener('touchend', function(e) {
    if (refresh) {
        if (!$("#input").is(":focus")) {
            $("#input").val("");
        }
        // Stuff...
    }
});
listElem.addEventListener('touchmove', function(e) {
    var move_to = startPos-(e.touches[0].clientY-e.changedTouches[0].screenY);
    if (move_to > 50) {
        refresh = true;
    } else {
        refresh = false;
    }
});