How to create a btn button to callback an element

in #utopian-io • 7 years ago (edited)

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.
    image.png

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

#tutorial #opensource #jquery
7 years ago in #utopian-io by
$0.00
    3 votes
    Reply 1
    Sort:  
  • Trending
    • [-]
     7 years ago 

    Your contribution cannot be approved because it is a duplicate. It is very similar to a contribution that was already accepted here.

    $0.00
      Reply