My function ''see'' some var that are declared before(len and per) and some of them not, so I need declare them again inside every function, why?

Question

My function ''see'' some var that are declared before and some of them not, so I need declare them again inside every function((len and per)), why? And how to make them available for all functions?

Orb = (function() {

    var progress = document.querySelector('.progress'),
        textarea = document.querySelector('textarea'),
        counter = document.querySelector('.counter');

    var tweetLength = 40,
        warningZone = Math.floor(tweetLength * (1 / 2)),
        dangerZone = Math.floor(tweetLength * (3 / 4));

    var pathLength = Math.PI * (progress.getAttribute('r') * 2);

    progress.style.strokeDashoffset = pathLength + 'px';
    progress.style.strokeDasharray = pathLength + 'px';

    var len = textarea.value.length,
        per = textarea.value.length / tweetLength;

My first function(len, per):

    function handleProgress() {

        var len = textarea.value.length,
            per = textarea.value.length / tweetLength;
        if (len <= tweetLength) {
            var newOffset = pathLength - (pathLength * per) + 'px';
            progress.style.strokeDashoffset = newOffset;
            console.log(newOffset);

        }
    }

My second function(len):

    function handleColors() {

        var len = textarea.value.length;
        progress.classList.toggle('warn', len > warningZone && len < dangerZone);
        progress.classList.toggle('danger', len >= dangerZone);
        progress.classList.toggle('tragedy', len == tweetLength);
    }

And the third(len):

function handleCounter() {
    var len = textarea.value.length;
    counter.textContent = tweetLength - len;
    counter.classList.toggle('danger', len >= tweetLength);
}
//handleCounter();

return {

    updateProgress: handleProgress,
    updateColors: handleColors,
    updateCounter: handleCounter
};

}());