Afficher un article dans un bouton

Version imprimable

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:

document.getElementById('addtocart7').click()

mon bouton :

Code:

1
2
3
            <button class="explore-btn">
                <a href="#coffee">Article 7</a>
            </button>

Mon fichier .js :

Code:

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:

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

Bonjour,
ta demande est si je peux me permettre un peu flou
Si par exemple tu veux afficher le produit dans un tableau html ca serait comme ca qu'il faudrait procédé

N'oublie pas de créer un bouton html avec pour id 'choix7'
Tu peux changer ton affichage et faire autrement que passer par un tableau , mais voici un exemple que tu pourras adapter.
Et le style jte laisse gérer :p

Code:

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prise de Photo depuis un Site Web</title>
    <style>
        #videoElement, #canvasElement {
            width: 100%;
            max-width: 400px;
        }
    </style>
</head>
<body>
    <h1>Prise de Photo depuis un Site Web</h1>
 
    <video id="videoElement" autoplay></video>
    <button onclick="takeSnapshot()">Prendre une Photo</button>
    <canvas id="canvasElement"></canvas>
    <img id="photoElement" src="" alt="Votre Photo" style="display: none;">
<input type="button" id="choix7" value="Afficher">
   <!--
 
 
     <script>
        // Accès à la caméra
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                var videoElement = document.getElementById('videoElement');
                videoElement.srcObject = stream;
            })
            .catch(function(error) {
                console.error('Accès à la caméra a échoué!', error);
            });
 
        // Capture d'une photo
        function takeSnapshot() {
            var videoElement = document.getElementById('videoElement');
            var canvasElement = document.getElementById('canvasElement');
            var photoElement = document.getElementById('photoElement');
            var context = canvasElement.getContext('2d');
 
            // Définir les dimensions du canvas pour correspondre à la vidéo
            canvasElement.width = videoElement.videoWidth;
            canvasElement.height = videoElement.videoHeight;
 
            // Dessiner l'image actuelle du flux vidéo sur le canvas
            context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
 
            // Convertir l'image du canvas en URL de données (base64)
            var imageDataURL = canvasElement.toDataURL('image/png');
 
            // Afficher l'image capturée
            photoElement.src = imageDataURL;
            photoElement.style.display = 'block';
        }
    </script>
   -->
   <script>
 
const products = [
    {
      "id": "1",
      "productName": "Boconó Specialty Coffee Beans Colombie 1 kg",
      "productPrice": "47.90",
      "productImg": "bocono1_1kg.png"
    },
    // ... autres éléments du tableau
    {
      "id": "7",
      "productName": "Specialty Boconó 3 Pack of 310g Coffee beans Colombia, Brazil, Ethiopia",
      "productPrice": "47.90",
      "productImg": "lot_3_pack_310gr.png"
    }
  ];
  document.querySelector('#choix7').addEventListener('click',function(){
    const productId=this.id.replace('choix','')
    const filteredProducts = products.filter(product => product.id === productId);
  
  // Vérifiez que le tableau filtré ne contient qu'un seul élément
  if (filteredProducts.length === 1) {
    const product = filteredProducts[0];
  
    // Créez un nouveau tableau HTML
    const table = document.createElement("table");
  
    // Ajoutez les en-têtes de colonne au tableau
    const headers = ["ID", "Nom du produit", "Prix du produit", "Image du produit"];
    const headerRow = document.createElement("tr");
    headers.forEach(header => {
      const th = document.createElement("th");
      th.textContent = header;
      headerRow.appendChild(th);
    });
    table.appendChild(headerRow);
  
    // Ajoutez une ligne au tableau avec les propriétés du produit
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${product.id}</td>
      <td>${product.productName}</td>
      <td>${product.productPrice}</td>
      <td><img src="${product.productImg}" alt="${product.productName}"></td>
    `;
    table.appendChild(row);
  
    // Ajoutez le tableau au corps de la page HTML
    document.body.appendChild(table);
  } else {
    console.log("Aucun produit trouvé avec l'ID spécifié.");
  }
 
  })
  
 
 
 
   </script>
</body>
</html>

20/06/2024, 17h36
cdevl37

Merci à vous et désoler je me suis mal écrit, j'ai déjà mon bouton dans mon fichier index.html et j'ai un fichier items.js ou j'ai les articles a afficher qui fonctionne très bien et j'ai un autre fichier script.js ou il affiche tout mes articles ainsi que le panier d'achat.

Je voudrais simplement que dans mon bouton html il m'affiche un article : document.getElementById('addtocart7').click() et je ne vois pas comment faire ?
24/06/2024, 13h48
gabi7756

Bonjour,
Tu veux afficher un article dans un bouton , tu entends quoi par "article " et par "bouton" ?
Parce que si tu veux afficher le nom du produit dans un bouton c'est pas compliqué normalement.

L'élément que tu me montres : document.getEl...('#patatipatata').click() a pour effet de simuler le click de la souris sur un élément (cf la doc : https://developer.mozilla.org/fr/doc...LElement/click )

Merci d'avance de ta réponse :)