Hướng dẫn dùng setonclicklistener JavaScript

Video hướng dẫn:

Bài viết hướng dẫn

onClick là sự kiện được kích hoạt khi người dùng nhấn vào một View nào đó, thường View được nhấn là nút lệnh (Button). Một View bất kỳ đều có sự kiện onClick.

Bây giờ ta sẽ làm một ví dụ về việc sử dụng sự dụng sự kiện onClick cho View theo hai cách.

Trước tiến ta thiết kế giao diện của ta theo đoạn code trong file res/layout/activity_main.xml như dưới đây:

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="//schemas.android.com/apk/res/android" xmlns:tools="//schemas.android.com/tools" xmlns:app="//schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/ title_demo" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.144" app:layout_constraintHorizontal_bias="0.473" android:textSize="30sp" android:textStyle="bold" android:textColor="#8BC34A" android:id="@+id/textViewTitle"/> <EditText android:layout_width="327dp" android:layout_height="45dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.392" android:id="@+id/editTextName" android:inputType="text" android:autofillHints="" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.512" android:id="@+id/textViewResult" app:layout_constraintHorizontal_bias="0.473" android:textSize="24sp" android:textStyle="bold"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/click_here" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.658" android:id="@+id/buttonClickHere" app:layout_constraintHorizontal_bias="0.473" android:textColor="#4CAF50" android:textSize="30sp" android:textStyle="bold"/> </androidx.constraintlayout.widget.ConstraintLayout>

Còn đây là file re/values/strings.xml:

<resources> <string name="app_name">OnClickV1Study</string> <string name=" title_demo">onClick Demo</string> <string name="click_here">Click Here</string> </resources>

Sau đó bạn nhấn Run để chạy, ta được giao diện như sau:

Còn bây giờ ta sẽ lập trình để thực hiện sự kiện onClick trong file main/java/MainActivity.java.

Cách 1: Dùng setOnClickListener

package v1study.com. titlev1study; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { Button buttonClickHere; EditText editTextName; TextView textViewResult; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getViews(); //Cách 1: buttonClickHere.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { textViewResult.setText("Tên ca bn là: "+editTextName.getText().toString().trim()); } }); } private void getViews() { buttonClickHere=findViewById(R.id.buttonClickHere); editTextName=findViewById(R.id.editTextName); textViewResult=findViewById(R.id.textViewResult); } }

Ở đoạn code trên, khi ta viết buttonClickHere.setOnClickListener và viết tiếp trong ngoặc tròn là new OnC thì hộp thoại gợi ý sẽ hiện ra và bạn chọn cái đầu tiên là View.OnClickListener như hình dưới đây:

Cách 2: Ta xây dựng một phương thức riêng có tên onClick (tên này ta có thể đặt theo ý muốn). Cụ thể như sau:

package v1study.com. titlev1study; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { Button buttonClickHere; EditText editTextName; TextView textViewResult; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getViews(); } private void getViews() { buttonClickHere=findViewById(R.id.buttonClickHere); editTextName=findViewById(R.id.editTextName); textViewResult=findViewById(R.id.textViewResult); } //Cách 2: public void onClick(View v) { textViewResult.setText("Tên ca bn là: "+editTextName.getText().toString().trim()); } }

Sau đó ta sang file activity_main.xml, chuyển sang chế độ Design rồi chọn phương thức onClick như thể hiện ở hình dưới:

Bây giờ chúng ta điền tên vào phần EditText rồi nhấn nút "CLICK HERE", ta được kết quả như sau:

Chủ đề