# How To Prevent Auto Run

**URL:** https://forum.kirupa.com/t/how-to-prevent-auto-run/647687
**Category:** programming
**Created:** [May 21, 2021, 3:27pm UTC](https://forum.kirupa.com/t/how-to-prevent-auto-run/647687 "2021-05-21T15:27:03Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Edwin\_Devey](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/edwin_devey/32/14550_2.png) [@Edwin\_Devey](https://forum.kirupa.com/u/Edwin_Devey)
#### Post date: [May 21, 2021, 3:27pm UTC](https://forum.kirupa.com/t/how-to-prevent-auto-run/647687/1 "2021-05-21T15:27:03Z")

</div>

I’m just starting to learn js and have found a useful script but it runs when the page loads. How can I change it run from a button onclick. It is only then that I can begin to play with it and change things while learning. This is the code:

```auto
<div>
   <p id="output">Result</p>
</div>

    const output = document.querySelector("#output");
    const display = s => output.innerText = s;
    const names = [
      "Charley",
      "Dianne",
      "Ellen",
      "Ethel",
      "Venus"
    ];
    const delayLoop = (fn, delay) => {
      return (name, i) => {
        setTimeout(() => {
          display(name);
        }, i * 1000);
      }
    };
    names.forEach(delayLoop(display, 1000));
```

I want to call it with

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 21, 2021, 5:08pm UTC](https://forum.kirupa.com/t/how-to-prevent-auto-run/647687/2 "2021-05-21T17:08:07Z")

</div>

Hi @Edwin_Devey - welcome to the forums 🙂

What you can do is have a button with an event listener function that reacts to the click event. This article goes into more detail here: [https://www.kirupa.com/html5/mouse\_events\_in\_javascript.htm](https://www.kirupa.com/html5/mouse_events_in_javascript.htm)

For example, you can do something similar:

```auto
let button = document.querySelector("#myButton");
button.addEventListener("click", doSomething, false);

function doSomething(e) {
    const output = document.querySelector("#output");
    const display = s => output.innerText = s;
    const names = [
      "Charley",
      "Dianne",
      "Ellen",
      "Ethel",
      "Venus"
    ];
    const delayLoop = (fn, delay) => {
      return (name, i) => {
        setTimeout(() => {
          display(name);
        }, i * 1000);
      }
    };
    names.forEach(delayLoop(display, 1000));
}

```

You just need to have a button in your HTML with the `id` value of **myButton**.

---

<div class="post-metadata">

### Author: ![Edwin\_Devey](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/edwin_devey/32/14550_2.png) [@Edwin\_Devey](https://forum.kirupa.com/u/Edwin_Devey)
#### Post date: [May 22, 2021, 9:16am UTC](https://forum.kirupa.com/t/how-to-prevent-auto-run/647687/3 "2021-05-22T09:16:44Z")

</div>

Thank you for a very prompt reply. Can’t wait to read the article and have a go again.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 23, 2021, 2:23pm UTC](https://forum.kirupa.com/t/how-to-prevent-auto-run/647687/4 "2021-05-23T14:23:37Z")

</div>

Let us know how it goes! 😀