Bonjour,
j'ai dans mon fichier index.html un bouton ou je voudrais afficher un article (l'id 7)le soucis je ne sais pas comment le faire ?
Je devrais faire ceci je suppose :mon bouton :
Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('addtocart7').click()
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <button class="explore-btn"> <a href="#coffee">Article 7</a> </button>
Mon fichier .js :
et ici items.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121 import { products } from "./items"; // Toggle shopping cart const shoppingCart = document.getElementById("shoppingCart"); const closeCart = document.getElementById("closeCart"); const itemContainer = document.getElementById('itemContainer'); const cartContainer = document.getElementById("cartContainer"); const eachCartItemContainer = document.getElementById("eachCartItemContainer"); const totalItem = document.getElementById("totalItem"); const cartTitle = document.getElementById("cartTitle") const totalPrice = document.getElementById("totalPrice"); const totalPriceContainer = document.getElementById("totalPriceContainer"); const storedItems = localStorage.getItem("cartItems") const cartItems = storedItems !== null ? storedItems.split(",") : [] let num = 1; num++; //Num is now 2. console.log(num); //2 console.log(num++); //will output the current value (2), then will set num to 3. console.log(num); //3 console.log(++num); //will set num to 4, then output its value, so it will send 4 to the console. console.log(num); //4 totalItem.innerText = cartItems.length !== null ? cartItems.length - 1 : 0 // Iterate card for (let index = 0; index < products.length; index++) { const { id, productName, productPrice, productImg } = products[index] itemContainer.innerHTML += ` <div class="card">` + ` <article class="cardImg">` + ` <img src="./img/${productImg}" alt="">` + `</article> ` + ` <div class="itemDescContainer">` + `<article class="itemDesc">` + `<h1 class="itemName">${productName}</h1>` + `<p class="itemPrice">${productPrice}</p>` + ` </article> ` + `<div class="addtocart" id="addtocart${id}")'>` + `<i class="fa-solid fa-cart-shopping cart"></i>` + ` </div>` + ` </div>` + `</div>` } // Add click event listener for card Item for (let index = 1; index <= products.length; index++) { document.getElementById(`addtocart${index}`).onclick = () => { if (cartItems.includes(index) === false) { totalItem.innerText = cartItems.length; cartItems.unshift(index) localStorage.setItem("cartItems", cartItems) } } } shoppingCart.onclick = () => { cartContainer.classList.add("showCartContainer"); displayItemInCart(); } closeCart.onclick = () => { cartContainer.classList.remove("showCartContainer"); } // AddClickEvent for button const displayItemInCart = () => { cartTitle.innerText = `${cartItems.length - 1} Item In cart`; eachCartItemContainer.innerHTML = ""; if (localStorage.getItem("cartItems")) { const cartArray = localStorage.getItem("cartItems").split(","); totalPrice.innerText = ""; totalPriceContainer.style.display = "block" products.map((item) => { const { id, productName, productPrice, productImg } = item if (cartArray.includes(id)) { totalPrice.innerHTML = (Number(totalPrice.innerText) + Number(productPrice)).toFixed(2); return eachCartItemContainer.innerHTML += `<div class="eachCart">` + ` <img src="./img/${productImg}" class="cartImg" alt="">` + `<div class="cartDesc">` + `<h1 class="cartItemName">${productName}</h1>` + `<p class="cartItemPrice">${productPrice}</p>` + `<i class="fa-solid fa-trash fa-lg" id="remove${id}"></i>` + `<i class="fa-solid fa-plus fa-lg" id="addtocart${id}")></i>` + `<i class="fa-solid fa-minus fa-lg" id="addtocart${id}")></i>` + `</div>` + `</div>` } }) } else { cartTitle.innerText = 'No Item' totalPriceContainer.style.display = "none" } onRemoveButton(); } const onRemoveButton = () => { const itemInCart = localStorage.getItem("cartItems"); const itemInCartArray = itemInCart.split(","); for (let index = 0; index < itemInCartArray.length; index++) { const removedItem = itemInCartArray[index] document.getElementById(`remove${removedItem}`).onclick = () => { const Itemindex = itemInCartArray.indexOf(removedItem) cartItems.splice(Itemindex, 1) localStorage.setItem("cartItems", cartItems) totalItem.innerText = cartItems.length - 1; displayItemInCart(); } }
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 export const products = [ { "id": "1", "productName": "Boconó Specialty Coffee Beans Colombie 1 kg", "productPrice": "47.90", "productImg": "bocono1_1kg.png" }, { "id": "2", "productName": "Boconó Specialty Coffee Beans Brazil 1 Kg", "productPrice": "44.90", "productImg": "coffee_brazil_1kg.png" }, { "id": "3", "productName": "Boconó Specialty Coffee Beans Ethiopia 1 Kg", "productPrice": "49.90", "productImg": "coffee_ethopia_1kg.png" }, { "id": "4", "productName": "Boconó Specialty Coffee Beans Colombie 310 g", "productPrice": "17.90", "productImg": "bocono_250.png" }, { "id": "5", "productName": "Boconó Specialty Coffee Beans Brazil 310 g", "productPrice": "16.90", "productImg": "bocono_250_brazil.png" }, { "id": "6", "productName": "Boconó Specialty Coffee Beans Ethiopia 310 g", "productPrice": "19.90", "productImg": "bocono_250_ethipia.png" }, { "id": "7", "productName": "Specialty Boconó 3 Pack of 310g Coffee beans Colombia, Brazil, Ethiopia", "productPrice": "47.90", "productImg": "lot_3_pack_310gr.png" } ]
Partager