Trang chủ » Blog » [Thực hành] Sự kiện chuột- Codegym.vn

[Thực hành] Sự kiện chuột- Codegym.vn

bởi CodeGym | 26/12/2023 17:16 | Bài thực hành | Blog

Sự kiện chuột – xem video tại: https://drive.google.com/file/d/16uKt2cEmz6F38BKbdevkw3E_jcJ_KIO2/view

Mục tiêu

Luyện tập thao tác sự kiện click chuột.

Mô tả bài toán- sự kiện chuột

Làm sử dụng sự kiện click chuột để di chuyển hình ảnh một quả bóng. Mỗi lần click quả bóng sẽ được di chuyển sang trái/phải một khoảng cách.

Để hoàn thành bài thực hành, bạn cần:

  • Đưa mã nguồn lên GitHub
  • Dán link của repository lên phần nộp bài trên CodeGymX

Các bước thực hiện

Bước 1: Tạo giao diện như hình

Sự kiện chuột

Mã nguồn tham khảo:

<form>
    <img id="myImage" src="images/ball.jpg" />
    <p>Click button below to move the image to right</p>
    <input type="button" value="Click Me" />
</form>

Bước 2: Tạo biến imgObj để lưu ảnh

let imgObj = null;

Bước 3: Sử dụng hàm getElementById () để nhận được một đối tượng DOM và sau đó gán nó cho biến imgObj.

imgObj = document.getElementById('myImage');

Bước 4: Tạo hàm init () để khởi tạo imgObj mà chúng ta đã đặt vị trí và các thuộc tính còn lại.

function init() {
    imgObj = document.getElementById('myImage');
    imgObj.style.position = 'relative';
    imgObj.style.left = '0px';
}

Bước 5: Tạo hàm moveRight () để tăng khoảng cách trái 10 pixel. Bạn cũng có thể đặt nó là một giá trị âm để di chuyển nó sang bên trái.

function moveRight() {
    imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}

Bước 6: Gọi hàm init() khi trình duyệt được tải lần đầu

window.onload = init;

Bước 7: Xác định sự kiện onclick cho button

<input type="button" value="Click Me" onclick="moveRight();" />

Bước 8: Chạy chương trình. Click chuột vào button Click Me và quan sát kết quả.

Trên đây CodeGym đã cùng với bạn luyện tập thao tác sự kiện chuột. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!

Download - Giáo trình thuật toán

6 + 10 =

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

6 + 1 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM