[JS] scoop van variable in HTML

vrijdag 9 juni 2017 01:55

Acties:

0 Henk 'm!

Topicstarter

Ik heb onderstaand script geschreven om stylesheets te updaten bij een tabwissel of met een knop.
Javascript is weer even geleden, en ik kreeg de knop niet aan de praat, omdat 'css' niet als global stond, maar als 'var css'. Vreselijk, ik vroeg me af of je aan een onclick iets kan vasthangen, zonder dat het global staat?

JavaScript:

function jsMessage(output) {
    var self = this;
    this.reset = function ()
    {
        console.log('jsMessage.reset()');
        clearTimeout(self.timeoutHide);
        clearInterval(self.intervalFade);
        clearTimeout(self.timeoutReset);
        clearTimeout(self.IntervalBlink);
        self.output.style.display = 'none';
        self.output.style.opacity = 1;
        self.counter = 0;
    };
    this.show = function(x)
    {
        self.reset();
        self.output.innerHTML = x;
        self.output.style.display = 'block';
        self.timeoutHide = setTimeout(self.hide,1500);
        self.IntervalBlink = setInterval(self.blink,200);
    };
    this.blink = function()
    {
        if(self.counter%2 == 0)
        {
            self.output.style.display = 'none';
        }
        else
        {
            self.output.style.display = 'block';
            if(self.counter>4)
                clearTimeout(self.IntervalBlink);
        }
        self.counter++;
    }
    this.hide = function()
    {       
        self.intervalFade = setInterval(self.fade,80);
        self.timeoutReset = setTimeout(self.reset,4000);
    }
    this.fade = function()
    {
        x = self.output.style.opacity;
        x = Math.max( Math.round(10*(10*x-1/(5*x)))/100 ,0);
//      x = Math.max((10*x-1)/10,0);
        console.log('x: '+x);
        self.output.style.opacity = x;
        if(x<=0)
            self.reset()
    };
    this.output = output;
    this.reset();
}
function Css(topAlert)
{
    var self = this;
    
    this.Reload = function()
    {
        topAlert.show('StyleSheets are being updated');
        for (var link of document.querySelectorAll("link[rel=stylesheet]"))
            link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime());
        topAlert.show('StyleSheets are updated on ' + new Date().toLocaleString());
    }
}
window.addEventListener('DOMContentLoaded', initial, true);
function initial()
{
    var topAlert = new jsMessage(document.getElementById("topAlert"));
  css = new Css(topAlert); // global
    console.log('window - DOMContentLoaded');
    window.addEventListener("focus", css.Reload, false);
    window.addEventListener("blur", function(event) { }, false);
}

</script>
</head>
<body>
<div    style="overflow:hidden;width:100%;position:fixed;background-color: #fff1ae;border-bottom: 1px solid #999;">
    <button style="float:left" onclick='css.Reload()'>Css.Reload()</button>
    <div    style="float:left" id='topAlert' >No message to display</div>
</div>

http://www.softfocus.be/

vrijdag 9 juni 2017 10:08

Acties:

0 Henk 'm!

q-enf0rcer.1

Ik zou een namespace aanmaken, bijvoorbeeld zo:

code:

1
2
3

var myNameSpace = {
 reload: function(topAlert){ /* doe je ding */ }
}

Je kunt er hier meer over lezen: https://stackoverflow.com...a-namespace-in-javascript

Feitelijk staat je namespace wel global natuurlijk, maar je functies zullen niet snel meer worden overschreven.

vrijdag 9 juni 2017 10:36

Acties:

0 Henk 'm!

Klaasvaak

Je kan al je javascript in een selfinvoking function zetten '(function(){...}())'. Vervolgens je onclick met behulp van [button].addEventListener vasthangen ipv met het 'onclick 'attribute. En je script aan de onderkant van de body ipv in de head zodat alle DOM beschikbaar is.

vrijdag 9 juni 2017 11:40

Acties:

0 Henk 'm!

Verwijderd

Of bedenk een unieke naam en voeg hem toe aan window: window.myCSSUpdater

edit: oh, en 'scope'

[ Voor 15% gewijzigd door Verwijderd op 09-06-2017 11:41 ]

Vraag

Alle reacties