Gộp code 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

[hunter]

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>";
	}

[Hao (ACP)]

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]

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

[Lovemagic]

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.

[Hao (ACP)]

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]

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

[hunter]

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 ạ

[Hao (ACP)]

Đọ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]

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