-2

I am beginner in JavaScript, I am trying to click on a button and I have to display an alert message. My button does not interact?

My HTML is:

<body>
   <h1>Test</h1>
   <button id='b1'>Click on button</button>
</body>

My problem is on Javascript

function myFunction(){
    ???? = document.getElementById('b1');
    alert('Hello');
}
joel
  • 255
  • 1
  • 10
  • 1
    This is a question for a JavaScript tutorial and not SO. You should be able to find the answer with any decent search provider or at the [Mozilla Developer Network](https://developer.mozilla.org/en-US/) – Andreas Mar 13 '20 at 17:51
  • 1
    There is a direct example of this on w3schools: https://www.w3schools.com/js/tryit.asp?filename=tryjs_alert – ControlAltDel Mar 13 '20 at 17:51
  • 1
    Does this answer your question? [JavaScript adding an onclick event to a element](https://stackoverflow.com/questions/49801990/javascript-adding-an-onclick-event-to-a-element) – John Montgomery Mar 13 '20 at 17:51
  • 4
    @ControlAltDel Please, for the love of God, don't reference W3 Schools. It is well known to have incomplete, inaccurate, or out of date information like the link you shared which still advises to use inline HTML event attributes like `onclick` in 2020, [which should not be used](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991). – Scott Marcus Mar 13 '20 at 17:57
  • @ScottMarcus Re: onXXX methods: You are completely right with this, if perhaps a little over the top :) I stopped using them (because you have to) when I discovered Content-Security-Policy. Still, I think it's useful to know about them, if only to know why you shouldn't use them. Re: w3schools: This site is very useful. Nearly everything I know about CSS I learned on w3schools. In terms of JS, I found there `datalist` and `input` (for the different HTML 5 types) pages useful. I'm just sayin... – ControlAltDel Mar 13 '20 at 18:17
  • 1
    @ControlAltDel But here's the thing about W3 Schools, why go to a site that is incomplete, inaccurate, or out of date, when you can go to Mozilla Dev. Network and still get all that information, but from the authoritative source? It's just as easy to learn there. There is **no** reason to use W3 Schools. And, on the `onXyz` attributes, there is also **no** reason to know about them, since they shouldn't be used anymore. The reason we still see so many people using them is because so many people keep these abominations alive. Let them die. ;) – Scott Marcus Mar 13 '20 at 18:47

1 Answers1

2

For something to happen when the user clicks, you must add an event handler (or callback function) to the element in question. That is done with the .addEventListener() method of the element:

// Get a reference to the button
let btn = document.getElementById("b1");

// Add an event handler for the click event
btn.addEventListener("click", myFunction);

function myFunction(){
    alert('Hello');
}
<button id='b1'>Click on button</button>

FYI: There is a much older way of doing this that you will still see people use today because they don't fully understand how event handlers work. That way uses embedded event attributes in the HTML, like onclick. Do not use these!

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71