30/09/2018, 18:55

Cần giúp đỡ về javascipt

Chào mọi người ! Hiện tại em đang làm 1 trang web nghe nhạc, nhưng đang có 1 vướng mắc là em muốn tạo 1 nút favorite khi ấn vào thì nó chuyển mầu nhưng em chưa nghĩ ra hướng giải quyết ! ( Vì mời học :)) )
mọi người có phương pháp nào giúp em với. Thank all !

... viết 21:05 ngày 30/09/2018

Mình cũng mới học javascript.
Mình nghĩ là bạn tạo sự kiện onclick cho nút đó.
Ở trong function javascript thì bạn change background cho nút đó.
Giả sử nút của bạn có id là button_favorite

function on_favorite()    {
    document.getElementByID("button_favorite").style.backgroundColor = <color>;
}
Truong Nguyen viết 21:04 ngày 30/09/2018

mình để cái favorite là 1 hình ảnh ( hình trái tim màu trằng ) giống cái trái tim ở trang này đó . và khi nhấn vào trái tim đó thì nó chuyển sang màu đỏ nên nếu chuyển backgruond thì sẽ không được. và dùng onclick thì nó chỉ chuyển sang trạng thái like mà không thể dislike được ý

... viết 21:06 ngày 30/09/2018

Vậy thì bạn thay đổi thuộc tính src của nó thành link một hình ảnh khác.

Truong Nguyen viết 20:58 ngày 30/09/2018

uhm. mình hiểu cái đấy, nhưng ý mình là click lần 1 nó chuyển sang like, click tiếp lần nữa nó chuyển sang dislike như thế thì dùng onclick mình nghĩ không ổn

... viết 21:04 ngày 30/09/2018

http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

Truong Nguyen viết 21:05 ngày 30/09/2018

ok thanks bạn nhiều
để mình thử

Võ Hoài Nam viết 21:06 ngày 30/09/2018

Đi hướng onclick được mà… thay vì bạn thay đổi thuộc tính style với background-color… Bạn thử chuyển sang hướng sử dung class…

Bình thường thì em nó

<button class="btn btn-favorite">Favorite</button>

Sau khi nhấn thì bạn thêm class active cho nó

<button class="btn btn-favorite active">Favorite</button>

Khi viết JS bạn kiểm tra element đó có tồn tại class active hay không? Nếu có thì remove, không thì add

Còn đây là CSS

.btn-favorite {
    background-color: yellow;
    color: #212121;
}

.btn-favorite.active {
    background-color: pink;
    color: #fff;
}
Bài liên quan
0