greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix(guide): Update article with more details and explanation

pull/26575/head
Peregrin Garet 2018-10-22 21:16:29 -04:00 committed by Heather Kusmierz
parent 7fe751782a
commit fb663d334f
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
guide/english/miscellaneous/change-text-with-click-events/index.md
View File

@ -1,8 +1,29 @@
---
title: Change Text with Click Events
---
When a click event happens, we can use Ajax to update an HTML element with the following code:
## Different Ways of Handling Click Events
> Coders often face a variety of options when confronting a challenge. One of these is their problem solving strategy. A simple example is letting the user interact with a website in the most basic of ways, a click. Let's take a look at a few different strategies:
1. HTML onclick
2. Javascript addEventListener
3. jQuery click event
```html
<body>
<div onclick="handleClick" id="listening">Click here!</div>
<p id="toChange"></p>
</body>
$(".message").html("Here is the message");
```
This tells jQuery to use the class `message` as the selector and to that, change the HTML to have the string provide, we can also add custom html elements wrapped in quotation marks.
```javascript
// HTML onclick
function handleClick(message = 'HTML onclick used'){
document.getElementById("toChange").innerText = message;
}
// Javascript click events
document.getElementById("listening").addEventListener('click', 'Javascript addEventListener used');
// jQuery click events
$("#listening").click(handleClick, 'jQuery event listener');
```
> With most situations, web developers have a few options on how to proceed. Depending on how you're organizing your work, you can put an emphasis on the utility of your HTML, JavaScript, jQuery, or any other number of libraries or strategies.