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

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

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é!