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

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

edited Nov 20 at 21:08

Heretic Monkey

6,32863365

asked Nov 20 at 18:21

Kinan Alamdar

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

|
show 2 more comments

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

edited Nov 20 at 21:08

Heretic Monkey

6,32863365

asked Nov 20 at 18:21

Kinan Alamdar

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

|
show 2 more comments

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

edited Nov 20 at 21:08

Heretic Monkey

6,32863365

asked Nov 20 at 18:21

Kinan Alamdar

639

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

edited Nov 20 at 21:08

Heretic Monkey

6,32863365

asked Nov 20 at 18:21

Kinan Alamdar

639

edited Nov 20 at 21:08

Heretic Monkey

6,32863365

asked Nov 20 at 18:21

Kinan Alamdar

639

edited Nov 20 at 21:08

Heretic Monkey

6,32863365

edited Nov 20 at 21:08

Heretic Monkey

6,32863365

edited Nov 20 at 21:08

Heretic Monkey

6,32863365

asked Nov 20 at 18:21

Kinan Alamdar

639

asked Nov 20 at 18:21

Kinan Alamdar

639

asked Nov 20 at 18:21

Kinan Alamdar

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

|
show 2 more comments

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

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

|
show 2 more comments

1 Answer
1

active

oldest

votes

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.

edited Nov 20 at 23:46

answered Nov 20 at 19:50

Thielicious

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

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

    }

}

edited Nov 20 at 23:46

answered Nov 20 at 19:50

Thielicious

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

add a comment |

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

    }

}

edited Nov 20 at 23:46

answered Nov 20 at 19:50

Thielicious

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

add a comment |

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

    }

}

edited Nov 20 at 23:46

answered Nov 20 at 19:50

Thielicious

1,9631119

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

    }

}

edited Nov 20 at 23:46

answered Nov 20 at 19:50

Thielicious

1,9631119

edited Nov 20 at 23:46

answered Nov 20 at 19:50

Thielicious

1,9631119

answered Nov 20 at 19:50

Thielicious

1,9631119

answered Nov 20 at 19:50

Thielicious

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

add a comment |

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

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg