Home/ Questions/Q 9192981
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:03:24+00:00

When I click on the button nothing happens unless I call the function in

  • 0

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!

JavaScript:

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();

HTML:

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

    <body>
        <h1 id="wiggles">TEMPLATE</h1>
        <!--<button id="sayHi" onclick="writeOutput()">Say Hi</button>-->
        <button id="sayHi">Say Hi</button>
        <p id="demo"></p>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you assign a function as a handler for an event, you need to assign the function itself, not execute the function and assign it’s return value as you are doing. Change this:

    document.getElementById("sayHi").onclick = writeOutput(); // parens

    To this:

    document.getElementById("sayHi").onclick = writeOutput; // no parens

    Here is a jsfiddle link with a working example.

    • 0