How to create a btn button to callback an element

What Will I Learn?

you will learn jquery click event
you will learn set event
You will learn how to callback html element using jquery

Requirements

You have basic about html
You have basic about jquery

Difficulty

Basic

Tutorial Contents

In this tutorial we will make a callback button, as the name suggests this button serves to display new text with one click.

In making this time the text editor that I use is notepad ++.
The first stage is to create a new file and save it with the name callback.html
Next you can create an html element.

<!DOCTYPE html>
<html>
       <head>
    <title> callback</title>
       </head>
       <body>
       </body>
</html>

Make a text along with its <id> and input into<body>, example:

<p id="test1">ipan ridha</p>

Make a button and put it inside <body> ... </ body>, in the creation we have to draw <button> and <id> for the button, example:

<button id="btn1">callback ipan</button>

Next we have to download and host the jquery file, if you do not have it you can download here, we will add the jquery code into <head>, this is the jquery code I use.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Like the code above, add jquery to <script> ... </ script>.
Then next we will create a command to make a callback, as we know, that the requirement to start jquery is to use the code below, and other terms is this code must be inside <script>.

$(document).ready(function(){
    ....
    });

Add event click on button, to call id button we must add an event to call it, like this:

$("#btn1").click(function(){
    ....
    });

#Btn1 adalah id button,click adalah click event , function(){ membuka sebuah function,
Tambahkan sebuah event untuk memanggil <p>, seperti ini :

$("#test1").text(function(i, origText){
    ....
    });

# test1: the id of the <p> element, text: text content, function (i, origText) { :open a function to hold the element of <p>.
-Before the button is clicked, we need a function to call the element from <p>

return "hello " + origText + " selamat pagi";

return : melakukan callback, origiText : menampung element dari <p>.
terakhir simpan file tersebut dan jalankan di browser dan click button, kamu akan melihat element dari <p>, dan kemudian element tersebut berubah berdasarkan text yang dimasukan kedalam return.

LIVE DEMO
Here full code :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text(function(i, origText){
            return "hello " + origText + " selamat pagi"; 
        });
    });
    $("#btn2").click(function(){
        $("#test2").text(function(i, origText){
            return "hello " + origText + " selamat siang "; 
        });
    });

Posted on Utopian.io - Rewarding Open Source Contributors