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(){
....
});
#Btn1adalah id button,clickadalah 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
Your contribution cannot be approved because it is a duplicate. It is very similar to a contribution that was already accepted here.
You can contact us on Discord.
[utopian-moderator]