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 :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
document.getElementById('addtocart7').click()
mon bouton :
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 :
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();
        }
    }
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
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"
    }
]