diff --git a/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md b/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md index c1614e49c1e..8e19a5728f5 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-are-inline-event-handlers-and-why-is-it-best-practice-to-use-addeventlistener-instead --- -# --description-- +# --interactive-- In the previous lessons, you learned how to work with events by using the `addEventListener()` method. But there is another, not recommended way, to work with events in JavaScript. @@ -13,16 +13,22 @@ Inline event handlers are special attributes on an HTML element that are used to Here is an example of a `button` element with an inline click event handler: +:::interactive_editor + ```html ``` +::: + When the user clicks on the button, the `alert` function is called and an alert dialog is displayed with the message `Hello World!`. Another way to use inline event handlers is to call a function that is defined in a `script` tag in the HTML document. Here is an example of defining a function called `changeBgColor` and calling it from an inline click event handler: +:::interactive_editor + ```html