How to Stop any other function when a specific function is running












0














I have this modal that slides in from the top. It works fine but I have other function too which is being clicked and hover when the modal layout is shown. I want to know, how do I stop those functions when this one is running? I have looked at preventDefault and return statement but I don't know how to use it if that would solve the issue. And also I would like to know if there is a better way to simplify this code.






var remove = document.querySelector('.remove');

var modal = document.querySelector('#project-layout');

var innerlayout = document.querySelector('#appended-layout');

var project = document.querySelectorAll('#project-grid');

for (var i = 0; i < project.length; i++) {

  project[i].addEventListener('click', function(e) {

    if (e.target === project[0]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[1]) {

      var tag = '<div class="layer1"><span>Food Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[2]) {

      var tag = '<div class="layer1"><span>Real Estate Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[3]) {

      var tag = '<div class="layer1"><span>Online Course Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[4]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[5]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[6]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[7]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    }

  })

}



remove.addEventListener('click', function() {

  modal.style.top = '-80%';

})





Please let me know if other functions code is needed. any help would be appreciated






javascript html function return preventdefault







share|improve this question
























  • JavaScript runs in a single-threaded environment - - only one line can be running at any one time. You cannot therefore have a line of code executed that stops another line that is already being executed. The only way a function can be stopped early is with a return or by throwing an exception.
    – Scott Marcus
    Nov 20 at 18:24






  • 1




    Your code is a bit hard to read with all the lorem ipsum in there!
    – Kokodoko
    Nov 20 at 18:27










  • Do you mean prevent user clicking on something else? Not really clear what "stop function" means
    – charlietfl
    Nov 20 at 18:28










  • Yes, charlietfl. that's what i mean i think i have to just create a window size div and make the visibility to hidden.
    – Kinan Alamdar
    Nov 20 at 18:42










  • Kokodoko . sorry for that brother.
    – Kinan Alamdar
    Nov 20 at 18:44
















0














I have this modal that slides in from the top. It works fine but I have other function too which is being clicked and hover when the modal layout is shown. I want to know, how do I stop those functions when this one is running? I have looked at preventDefault and return statement but I don't know how to use it if that would solve the issue. And also I would like to know if there is a better way to simplify this code.






var remove = document.querySelector('.remove');

var modal = document.querySelector('#project-layout');

var innerlayout = document.querySelector('#appended-layout');

var project = document.querySelectorAll('#project-grid');

for (var i = 0; i < project.length; i++) {

  project[i].addEventListener('click', function(e) {

    if (e.target === project[0]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[1]) {

      var tag = '<div class="layer1"><span>Food Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[2]) {

      var tag = '<div class="layer1"><span>Real Estate Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[3]) {

      var tag = '<div class="layer1"><span>Online Course Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[4]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[5]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[6]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[7]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    }

  })

}



remove.addEventListener('click', function() {

  modal.style.top = '-80%';

})





Please let me know if other functions code is needed. any help would be appreciated






javascript html function return preventdefault







share|improve this question
























  • JavaScript runs in a single-threaded environment - - only one line can be running at any one time. You cannot therefore have a line of code executed that stops another line that is already being executed. The only way a function can be stopped early is with a return or by throwing an exception.
    – Scott Marcus
    Nov 20 at 18:24






  • 1




    Your code is a bit hard to read with all the lorem ipsum in there!
    – Kokodoko
    Nov 20 at 18:27










  • Do you mean prevent user clicking on something else? Not really clear what "stop function" means
    – charlietfl
    Nov 20 at 18:28










  • Yes, charlietfl. that's what i mean i think i have to just create a window size div and make the visibility to hidden.
    – Kinan Alamdar
    Nov 20 at 18:42










  • Kokodoko . sorry for that brother.
    – Kinan Alamdar
    Nov 20 at 18:44














0












0








0







I have this modal that slides in from the top. It works fine but I have other function too which is being clicked and hover when the modal layout is shown. I want to know, how do I stop those functions when this one is running? I have looked at preventDefault and return statement but I don't know how to use it if that would solve the issue. And also I would like to know if there is a better way to simplify this code.






var remove = document.querySelector('.remove');

var modal = document.querySelector('#project-layout');

var innerlayout = document.querySelector('#appended-layout');

var project = document.querySelectorAll('#project-grid');

for (var i = 0; i < project.length; i++) {

  project[i].addEventListener('click', function(e) {

    if (e.target === project[0]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[1]) {

      var tag = '<div class="layer1"><span>Food Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[2]) {

      var tag = '<div class="layer1"><span>Real Estate Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[3]) {

      var tag = '<div class="layer1"><span>Online Course Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[4]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[5]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[6]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[7]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    }

  })

}



remove.addEventListener('click', function() {

  modal.style.top = '-80%';

})





Please let me know if other functions code is needed. any help would be appreciated






javascript html function return preventdefault







share|improve this question















I have this modal that slides in from the top. It works fine but I have other function too which is being clicked and hover when the modal layout is shown. I want to know, how do I stop those functions when this one is running? I have looked at preventDefault and return statement but I don't know how to use it if that would solve the issue. And also I would like to know if there is a better way to simplify this code.






var remove = document.querySelector('.remove');

var modal = document.querySelector('#project-layout');

var innerlayout = document.querySelector('#appended-layout');

var project = document.querySelectorAll('#project-grid');

for (var i = 0; i < project.length; i++) {

  project[i].addEventListener('click', function(e) {

    if (e.target === project[0]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[1]) {

      var tag = '<div class="layer1"><span>Food Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[2]) {

      var tag = '<div class="layer1"><span>Real Estate Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[3]) {

      var tag = '<div class="layer1"><span>Online Course Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[4]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[5]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[6]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[7]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    }

  })

}



remove.addEventListener('click', function() {

  modal.style.top = '-80%';

})





Please let me know if other functions code is needed. any help would be appreciated






var remove = document.querySelector('.remove');

var modal = document.querySelector('#project-layout');

var innerlayout = document.querySelector('#appended-layout');

var project = document.querySelectorAll('#project-grid');

for (var i = 0; i < project.length; i++) {

  project[i].addEventListener('click', function(e) {

    if (e.target === project[0]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[1]) {

      var tag = '<div class="layer1"><span>Food Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[2]) {

      var tag = '<div class="layer1"><span>Real Estate Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[3]) {

      var tag = '<div class="layer1"><span>Online Course Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[4]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[5]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[6]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[7]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    }

  })

}



remove.addEventListener('click', function() {

  modal.style.top = '-80%';

})





var remove = document.querySelector('.remove');

var modal = document.querySelector('#project-layout');

var innerlayout = document.querySelector('#appended-layout');

var project = document.querySelectorAll('#project-grid');

for (var i = 0; i < project.length; i++) {

  project[i].addEventListener('click', function(e) {

    if (e.target === project[0]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[1]) {

      var tag = '<div class="layer1"><span>Food Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[2]) {

      var tag = '<div class="layer1"><span>Real Estate Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[3]) {

      var tag = '<div class="layer1"><span>Online Course Site</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[4]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[5]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[6]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    } else if (e.target === project[7]) {

      var tag = '<div class="layer1"><span>Ecommerce Store</span></div><div class="layer2"><h4>Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lorem, ullamcorper id lorem quis, pharetra fringilla risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent cursus leo sem, eget pulvinar neque pretium et. Mauris ac arcu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div id="list"><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul><ul><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li><li>- Lorem ipsum dolor sit amet. </li></ul></div><div id="show-on-lgsrn"><a href="./projects/web-store/E Store.html" target="_blank"><button>Show Site</button></a></div>';

      innerlayout.innerHTML = tag;

      modal.style.top = '20%';

    }

  })

}



remove.addEventListener('click', function() {

  modal.style.top = '-80%';

})





javascript html function return preventdefault




javascript html function return preventdefault






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 at 21:08









Heretic Monkey

6,32863365




6,32863365










asked Nov 20 at 18:21









Kinan Alamdar

639




639












  • JavaScript runs in a single-threaded environment - - only one line can be running at any one time. You cannot therefore have a line of code executed that stops another line that is already being executed. The only way a function can be stopped early is with a return or by throwing an exception.
    – Scott Marcus
    Nov 20 at 18:24






  • 1




    Your code is a bit hard to read with all the lorem ipsum in there!
    – Kokodoko
    Nov 20 at 18:27










  • Do you mean prevent user clicking on something else? Not really clear what "stop function" means
    – charlietfl
    Nov 20 at 18:28










  • Yes, charlietfl. that's what i mean i think i have to just create a window size div and make the visibility to hidden.
    – Kinan Alamdar
    Nov 20 at 18:42










  • Kokodoko . sorry for that brother.
    – Kinan Alamdar
    Nov 20 at 18:44


















  • JavaScript runs in a single-threaded environment - - only one line can be running at any one time. You cannot therefore have a line of code executed that stops another line that is already being executed. The only way a function can be stopped early is with a return or by throwing an exception.
    – Scott Marcus
    Nov 20 at 18:24






  • 1




    Your code is a bit hard to read with all the lorem ipsum in there!
    – Kokodoko
    Nov 20 at 18:27










  • Do you mean prevent user clicking on something else? Not really clear what "stop function" means
    – charlietfl
    Nov 20 at 18:28










  • Yes, charlietfl. that's what i mean i think i have to just create a window size div and make the visibility to hidden.
    – Kinan Alamdar
    Nov 20 at 18:42










  • Kokodoko . sorry for that brother.
    – Kinan Alamdar
    Nov 20 at 18:44
















JavaScript runs in a single-threaded environment - - only one line can be running at any one time. You cannot therefore have a line of code executed that stops another line that is already being executed. The only way a function can be stopped early is with a return or by throwing an exception.
– Scott Marcus
Nov 20 at 18:24




JavaScript runs in a single-threaded environment - - only one line can be running at any one time. You cannot therefore have a line of code executed that stops another line that is already being executed. The only way a function can be stopped early is with a return or by throwing an exception.
– Scott Marcus
Nov 20 at 18:24




1




1




Your code is a bit hard to read with all the lorem ipsum in there!
– Kokodoko
Nov 20 at 18:27




Your code is a bit hard to read with all the lorem ipsum in there!
– Kokodoko
Nov 20 at 18:27












Do you mean prevent user clicking on something else? Not really clear what "stop function" means
– charlietfl
Nov 20 at 18:28




Do you mean prevent user clicking on something else? Not really clear what "stop function" means
– charlietfl
Nov 20 at 18:28












Yes, charlietfl. that's what i mean i think i have to just create a window size div and make the visibility to hidden.
– Kinan Alamdar
Nov 20 at 18:42




Yes, charlietfl. that's what i mean i think i have to just create a window size div and make the visibility to hidden.
– Kinan Alamdar
Nov 20 at 18:42












Kokodoko . sorry for that brother.
– Kinan Alamdar
Nov 20 at 18:44




Kokodoko . sorry for that brother.
– Kinan Alamdar
Nov 20 at 18:44












1 Answer
1






active

oldest

votes


















0














When you fire a function this doesn't mean that it performs all actions in it. It can be skipped by using conditions. This way you can prevent actions being performed twice at the same time.

Create a global variable that contains a status value. When an action is being performed it will update the status variable. If the status is active, the action won't run again since it's already in the state of process until it's done. The following's just an example structure how it could look. 



var active = false

function action() {

    if (!active) {

        // runs action if not active

        active = true

    } else if (active) {

        // otherwise it will skip the action and stops it instead

        active = false

        return

    }

}


Perhaps, in your case you could set the status variable via an event listener that runs the modal box and update the status again once you click on remove element when the modal box disappears. I don't know your code of the other function it's just my guess to reproduce the problem.






share|improve this answer























  • Create a global variable... Not very good advice.
    – Scott Marcus
    Nov 21 at 16:56










  • You're not constructive... Not very good critique.
    – Thielicious
    Nov 22 at 1:08










  • Advocating good coding habits is always constructive. Advocating bad ones is never constructive.
    – Scott Marcus
    Nov 22 at 14:39










  • Mister, your critique is not constructive, not your ego.
    – Thielicious
    Nov 22 at 16:40











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399197%2fhow-to-stop-any-other-function-when-a-specific-function-is-running%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














When you fire a function this doesn't mean that it performs all actions in it. It can be skipped by using conditions. This way you can prevent actions being performed twice at the same time.

Create a global variable that contains a status value. When an action is being performed it will update the status variable. If the status is active, the action won't run again since it's already in the state of process until it's done. The following's just an example structure how it could look. 



var active = false

function action() {

    if (!active) {

        // runs action if not active

        active = true

    } else if (active) {

        // otherwise it will skip the action and stops it instead

        active = false

        return

    }

}


Perhaps, in your case you could set the status variable via an event listener that runs the modal box and update the status again once you click on remove element when the modal box disappears. I don't know your code of the other function it's just my guess to reproduce the problem.






share|improve this answer























  • Create a global variable... Not very good advice.
    – Scott Marcus
    Nov 21 at 16:56










  • You're not constructive... Not very good critique.
    – Thielicious
    Nov 22 at 1:08










  • Advocating good coding habits is always constructive. Advocating bad ones is never constructive.
    – Scott Marcus
    Nov 22 at 14:39










  • Mister, your critique is not constructive, not your ego.
    – Thielicious
    Nov 22 at 16:40
















0














When you fire a function this doesn't mean that it performs all actions in it. It can be skipped by using conditions. This way you can prevent actions being performed twice at the same time.

Create a global variable that contains a status value. When an action is being performed it will update the status variable. If the status is active, the action won't run again since it's already in the state of process until it's done. The following's just an example structure how it could look. 



var active = false

function action() {

    if (!active) {

        // runs action if not active

        active = true

    } else if (active) {

        // otherwise it will skip the action and stops it instead

        active = false

        return

    }

}


Perhaps, in your case you could set the status variable via an event listener that runs the modal box and update the status again once you click on remove element when the modal box disappears. I don't know your code of the other function it's just my guess to reproduce the problem.






share|improve this answer























  • Create a global variable... Not very good advice.
    – Scott Marcus
    Nov 21 at 16:56










  • You're not constructive... Not very good critique.
    – Thielicious
    Nov 22 at 1:08










  • Advocating good coding habits is always constructive. Advocating bad ones is never constructive.
    – Scott Marcus
    Nov 22 at 14:39










  • Mister, your critique is not constructive, not your ego.
    – Thielicious
    Nov 22 at 16:40














0












0








0






When you fire a function this doesn't mean that it performs all actions in it. It can be skipped by using conditions. This way you can prevent actions being performed twice at the same time.

Create a global variable that contains a status value. When an action is being performed it will update the status variable. If the status is active, the action won't run again since it's already in the state of process until it's done. The following's just an example structure how it could look. 



var active = false

function action() {

    if (!active) {

        // runs action if not active

        active = true

    } else if (active) {

        // otherwise it will skip the action and stops it instead

        active = false

        return

    }

}


Perhaps, in your case you could set the status variable via an event listener that runs the modal box and update the status again once you click on remove element when the modal box disappears. I don't know your code of the other function it's just my guess to reproduce the problem.






share|improve this answer














When you fire a function this doesn't mean that it performs all actions in it. It can be skipped by using conditions. This way you can prevent actions being performed twice at the same time.

Create a global variable that contains a status value. When an action is being performed it will update the status variable. If the status is active, the action won't run again since it's already in the state of process until it's done. The following's just an example structure how it could look. 



var active = false

function action() {

    if (!active) {

        // runs action if not active

        active = true

    } else if (active) {

        // otherwise it will skip the action and stops it instead

        active = false

        return

    }

}


Perhaps, in your case you could set the status variable via an event listener that runs the modal box and update the status again once you click on remove element when the modal box disappears. I don't know your code of the other function it's just my guess to reproduce the problem.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 20 at 23:46

























answered Nov 20 at 19:50









Thielicious

1,9631119




1,9631119












  • Create a global variable... Not very good advice.
    – Scott Marcus
    Nov 21 at 16:56










  • You're not constructive... Not very good critique.
    – Thielicious
    Nov 22 at 1:08










  • Advocating good coding habits is always constructive. Advocating bad ones is never constructive.
    – Scott Marcus
    Nov 22 at 14:39










  • Mister, your critique is not constructive, not your ego.
    – Thielicious
    Nov 22 at 16:40


















  • Create a global variable... Not very good advice.
    – Scott Marcus
    Nov 21 at 16:56










  • You're not constructive... Not very good critique.
    – Thielicious
    Nov 22 at 1:08










  • Advocating good coding habits is always constructive. Advocating bad ones is never constructive.
    – Scott Marcus
    Nov 22 at 14:39










  • Mister, your critique is not constructive, not your ego.
    – Thielicious
    Nov 22 at 16:40
















Create a global variable... Not very good advice.
– Scott Marcus
Nov 21 at 16:56




Create a global variable... Not very good advice.
– Scott Marcus
Nov 21 at 16:56












You're not constructive... Not very good critique.
– Thielicious
Nov 22 at 1:08




You're not constructive... Not very good critique.
– Thielicious
Nov 22 at 1:08












Advocating good coding habits is always constructive. Advocating bad ones is never constructive.
– Scott Marcus
Nov 22 at 14:39




Advocating good coding habits is always constructive. Advocating bad ones is never constructive.
– Scott Marcus
Nov 22 at 14:39












Mister, your critique is not constructive, not your ego.
– Thielicious
Nov 22 at 16:40




Mister, your critique is not constructive, not your ego.
– Thielicious
Nov 22 at 16:40


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399197%2fhow-to-stop-any-other-function-when-a-specific-function-is-running%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Wiesbaden

Image
Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is
Read more

Marschland

Image
Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si
Read more

Dieringhausen

Image
Dieringhausen Stadt Gummersbach 50.982777777778 7.5316666666667 165 Koordinaten: 50° 58′ 58″  N , 7° 31′ 54″  O Höhe: 165  (160–245)  m Einwohner: 5055  (30. Jun. 2016) Postleitzahl: 51645 Vorwahl: 02261 Lage von Dieringhausen in Gummersbach Im Hohl ca. 1927–1930 Ansicht von Südwesten bei Bünghausen Dieringhausen (im örtlichen Dialekt Dierkesen ) ist ein Ortsteil von Gummersbach im Oberbergischen Kreis, Regierungsbezirk Köln, Nordrhein-Westfalen (Deutschland). Inhaltsverzeichnis 1 Geographie 2 Geschichte 3 Kultur 3.1 Sehenswürdigkeiten 3.2 Regelmäßige Veranstaltungen 4 Infrastruktur und Wirtschaft 4.1 Verkehr 4.1.1 Schienen- und Busverkehr 4.1.2 Straßen 4.2 Öffentliche Einrichtungen 4.2.1 Schulen und Bildungseinrichtungen 4.2.2 Kirchliche Einrichtungen 5 Persönlichkeiten 5.1 In Dieringhausen geboren 5.2 In Dieringhausen gelebt 6 Einzelnachweise 7
Read more