Button onclick not working as expected with external JS

Question

This is separated in two docs, one is an html and the other is a js. I use VSC for the editor. Here is my HTML first:

I am trying to get the print out to say "Hello John" after I click the button on the browser. However, the only way it works is when it goes up at the same time as the button, but I need it to not be returned until afterwards.

This is probably a very simple fix, but I haven't been able to find out exactly how, and I am a new JavaScript student, so I'm not competent in searching for the problems yet. (In debug it doesn't even pick up this as an error or anything, so I can't even just copy and paste in google..)

function hello() {
  var name = "John";
  return "Hello " + name;
}
document.getElementById("well").innerHTML = hello();

<p id="well"></p>
<button onclick="hello()">
                Click me for an example of the return keyword in action!!!
            </button>

Try running `hello()` in the console. It might not be a problem with the code provided. — shreyasm-dev, Sep 23 '20 at 18:37
If you move the `innerHTML` part into the function and assign it there instead of return then it would show up that message. — norbitrial, Sep 23 '20 at 18:37

score 1 · Answer 1 · answered Sep 23 '20 at 18:38

You need to set innerHTML in hello function like in the example below:

function hello() {
  var name = "John";
  document.getElementById("well").innerHTML = "Hello " + name;
}

<p id="well"></p>
<button onclick="hello()">
    Click me for an example of the return keyword in action!!!
</button>

Button onclick not working as expected with external JS

1 Answers1