I can't figure out how to get my javascript onclick event to work
<p>When I click on the button nothing happens unless I call the function in the html. I am trying to remove all inline javascript. I have included the commented-out section of html that works. Thanks in advance for the help!</p>

<p><strong>JavaScript:</strong></p>

<pre><code>var welcomeString;
const TEST = 1;

function setWelcomeString() {
    "use strict";
    welcomeString = prompt("Please enter your name: ", "nobody");
}

function writeOutput() {
    "use strict";
    document.getElementById("demo").innerHTML = "Hello, " + welcomeString;
}

function main() {
    "use strict";
    setWelcomeString();
    document.getElementById("sayHi").onclick = writeOutput();
}

main();
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;**SET TITLE**&lt;/title&gt;
        &lt;link href="css/style.css" rel="stylesheet"&gt;
        &lt;script src="firstScript.js"&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;h1 id="wiggles"&gt;TEMPLATE&lt;/h1&gt;
        &lt;!--&lt;button id="sayHi" onclick="writeOutput()"&gt;Say Hi&lt;/button&gt;--&gt;
        &lt;button id="sayHi"&gt;Say Hi&lt;/button&gt;
        &lt;p id="demo"&gt;&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
