Thursday, April 29, 2021

Toggling boolean without using global variable

<div id='_form'>
    Form Inputs
</div>

<div id='_preview' style='display: none'>
    Preview
</div>

<button id='_toggle'>
   Toggle
</button>

<script>
window._toggle.onclick = () => previewFormInputs();
// can also do the following instead of the above
/* window._toggle.onclick = previewFormInputs; */

function setElementVisibility(element, visible) {
    element.style.display = visible ? 'inherit' : 'none';
}

let _previewVisible = false;
function previewFormInputs() {
    _previewVisible = !_previewVisible;
    setElementVisibility(window._form, !_previewVisible);
    setElementVisibility(window._preview, _previewVisible);
}
</script>
Live: https://jsfiddle.net/sewa4jh1/1/
The code above can be improved by combining both the action and the state _previewVisible
<div id='_form'>
    Form Inputs
</div>
 
<div id='_preview' style='display: none'>
    Preview
</div>
 
<button id='_toggle'>
   Toggle
</button>
 
<script>
window._toggle.onclick = () => previewFormInputs();
// can also do the following instead of the above
// _stats.onclick = previewFormInputs;
 
function setElementVisibility(element, visible) {
    element.style.display = visible ? 'inherit' : 'none';
}
 
const previewFormInputs = (function () {
    let previewVisible = false;
     
    return function () {
        previewVisible = !previewVisible;
        setElementVisibility(window._form, !previewVisible);
        setElementVisibility(window._preview, previewVisible);
    }   
})();
</script>
Live: https://jsfiddle.net/sewa4jh1/3/

No comments:

Post a Comment