Fixed minor grammatical errors. (#28948)
parent
c6945de3db
commit
ab02a17a63
|
@ -18,7 +18,7 @@ The `onclick` event in JavaScript lets you as a programmer execute a function wh
|
|||
In the simple example above, when a user clicks on the button they will see an alert in their browser showing `Button was clicked!`.
|
||||
|
||||
### Adding `onclick` dynamically
|
||||
The `onclick` event can also be programmatically added to any element using the following code in the following example:
|
||||
The `onclick` event can also be programmatically added to any element using the code in the following example:
|
||||
|
||||
```javascript
|
||||
<p id="foo">click on this element.</p>
|
||||
|
@ -36,25 +36,26 @@ The `onclick` event can also be programmatically added to any element using the
|
|||
|
||||
### Note ###
|
||||
|
||||
It's important to note that using onclick we can add just one listener function. If you want to add more, just use addEventListener(), which is the preferred way for adding events listener.
|
||||
It's important to note that when using onclick we can add just one listener function. If you want to add more, just use addEventListener(), which is the preferred way for adding events listener.
|
||||
|
||||
In the above example, when a user clicks on the `paragraph` element in the `html`, they will see an alert showing `onclick Event triggered`.
|
||||
|
||||
### Preventing default action
|
||||
|
||||
By attaching `onclick` to links (HTML's `a` tag), we can also prevent the default click action from occurring.
|
||||
|
||||
```javascript
|
||||
<a href="https://guide.freecodecamp.org" onclick="myAlert(event)">Guides</a>
|
||||
|
||||
<script>
|
||||
function myAlert(e) {
|
||||
e.preventDefault();
|
||||
alert("Link was clicked but page was not open");
|
||||
function myAlert(event) {
|
||||
event.preventDefault();
|
||||
alert("Link was clicked but page was not opened");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
In the above example we prevented default behavior of `a` element (opening link) using `event.preventDefault()` inside our `onclick` callback function.
|
||||
In the above example we prevented the default behavior of `a` element (opening link) using `event.preventDefault()` inside our `onclick` callback function.
|
||||
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick' target='_blank' rel='nofollow'>MDN</a>
|
||||
|
||||
|
|
Loading…
Reference in New Issue