01/10/2018, 09:05

Cho mình hỏi chỗ này xíu

Mình có viết 1 đoạn code để thêm các sản phẩm vào giỏ hàng, Mà mình thấy code có vẻ dài bởi vì nếu mỗi lần thực thi thì phải gọi một button mới và tạo 1 id mới. Vậy có cách nào gộp tất cả các button lại thành 1 mà khi click mỗi sản phẩm thì sản phẩm tương ứng sẽ được thêm vào giỏ hàng không nhĩ?
Và làm cách nào để đổi nút button dưới giỏ hàng thành nút xóa nhĩ?
Mọi người thông não hộ em phát. Dưới đây mới 3 sản phẩm chứ 100 sản phẩm thì chắc thêm chết luôn ạ
Code đây ạ:

<table border="1">

<tr id ="content">
	<th>Sản phẩm 1</th>
	<th>4$</th>
	<th><input   type="button" value="Thêm"  onclick="Btn_Them()"/>
</tr>

<tr id ="content2">
	<th>Sản phẩm 2</th>
	<th>2$</th>
	<th><input   type="button" value="Thêm"  onclick="Btn_Them1()"/>
</tr>

<tr id ="content3">
	<th>Sản phẩm 3</th>
	<th>8$</th>
	<th><input   type="button" value="Thêm"  onclick="Btn_Them2()"/>
</tr>

</table>
<br>
<h1>Giỏ hàng của bạn </h2>
<span id = "GoiHang"></span>

JS

function Btn_Them(){
		var x = document.getElementById("content").innerHTML;
		document.getElementById("GoiHang").innerHTML += x + "<br>";
	}
function Btn_Them1(){
		var x1 = document.getElementById("content2").innerHTML;
		document.getElementById("GoiHang").innerHTML += x1 + "<br>";
	}
function Btn_Them2(){
		var x2 = document.getElementById("content3").innerHTML;
		document.getElementById("GoiHang").innerHTML += x2 + "<br>";
	}
ACP viết 11:16 ngày 01/10/2018

Có thể gom nó lại như vầy, sửa hàm Thêm lại:

function Btn_Them(htmlItem){
        var x = document.getElementById($($(htmlItem).parent()).attr("Id")).innerHTML;
		document.getElementById("GoiHang").innerHTML += x + "<br>";
	}

Khi đó mỗi hàm onclick chỉ cần truyền thêm như vậy: onclick="Btn_Them(this)" Code mình có xài thêm thư viện Jquery nhé.

hunter viết 11:05 ngày 01/10/2018

Có cách nào không sử dụng thư viện Jquery k a?

viết 11:17 ngày 01/10/2018

dùng js thuần cũng làm được.
Gói tất cả button vào 1 element cha, lắng nghe sự kiện ở element này, khi click thì check e.target, xem có phải là cái mình cần không, có thì thực hiện.
Trong bài của bạn có thể đặt id cho table hoặc nếu có 1 table thì add thẳng addEventListener vào table.

Cái này gọi là Event Bubbling/Capturing trong javascript, bạn tưởng tượng giống như ném 1 hòn đá xuống nước thì có sóng lan tỏa ra ngoài (ấn 1 element nhưng nó truyền cho các elemnt khác nữa), đó là buble, ngược lại là capture.

ACP viết 11:09 ngày 01/10/2018

Nếu dùng javascript thì thay dòng:
var x = document.getElementById($($(htmlItem).parent()).attr("Id")).innerHTML;
thành:
var x = document.getElementById(htmlItem.parentElement.parentElement.id).innerHTML;

là được.Còn về logic thì giống như bạn @Lovemagic

hunter viết 11:13 ngày 01/10/2018

E đã làm được he he.

hunter viết 11:15 ngày 01/10/2018

a hướng dẫn e tính tổng dc k a e tính tổng mà k ra híc. ví dụ như e get 2 + 2 thì nó thành 4 vậy mà e get 2 + 2 nó lại ra 22 a ạ

ACP viết 11:18 ngày 01/10/2018

Đọc về phép cộng, trừ,… trong javascript nhé, đọc để hiểu cách nó gán: https://www.w3schools.com/js/js_operators.asp

hunter viết 11:11 ngày 01/10/2018

hi e làm dc rồi a ^^

Bài liên quan
0