Javascript 在JS中的my modal中创建动态内容

我目前正在某人的网站上工作，我为每个产品创建了6种不同的模式。但是当我点击模态按钮时，我想在每个模态中插入他的内容

到目前为止，我已经做到了：

function produits(tag, nom, price, imagesrc, description){
 this.Tag = tag;
 this.Nom = nom;
 this.Price = price;
 this.SRC = imagesrc;
 this.Description = description;
}

var produit = [];

//6x for my 6 products 
produit.push(new produits(1, "nom", 35, "path/to/img","Description"));

In html I created my modals 6x this way 
<button type="button" id="bouton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add to cart</button>

                <div id="myModal" class="modal fade" role="dialog">
                  <div class="modal-dialog">

                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                      </div>
                      <div class="modal-body">
                        <p>Some text in the modal.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                    </div>
                  </div>
                </div>

功能产品（标签、名称、价格、图像、说明）{
this.Tag=Tag；
这个.Nom=Nom；
这个。价格=价格；
this.SRC=imagesrc；
这个。描述=描述；
}
var-produit=[]；
//6x用于我的6款产品
产品推送（新产品（1，“名称”，35，“路径/目的地/img”，“说明”）；
在html中，我用这种方式创建了我的modals 6x
添加到购物车
&时代；
模态头
模态中的一些文本

接近

现在我想将我存储在数组中的6个产品的内容添加到我的modals中。有人能帮我吗

事先非常感谢

---

约翰看一下这把小提琴

在本文中，我将产品索引传递为1。您可以通过为另外5个产品创建数组并分别将索引传递为2、3、4、5和6来测试它

请注意，我在单击按钮时调用了showProduct（）函数

HTML:

<button type="button" id="bouton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="showProduct(1);">Add to cart</button>

            <div id="myModal" class="modal fade" role="dialog">
              <div class="modal-dialog">

                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                  </div>
                  <div class="modal-body">
                    <p>Some text in the modal.</p>
                    <div class="row">
                    <span><b>Product tag : </b></span><span id="product_tag"></span>
                    </div>
                    <div class="row">
                    <span><b>Product nom : </b></span>
                      <span id="product_nom"></span>
                    </div>
                    <div class="row">
                     <span><b>Product price : </b></span>
                    <span id="product_price"></span>
                    </div>
                    <div class="row">
                    <span><b>Product image : </b></span>
                    <img id="product_image" src=""/>
                    </div>
                    <div class="row">
                    <span><b>Product description : </b></span>
                    <span id="product_description"></span>
                    </div>

                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>

---

[productId-1]是什么@Lalit@JohnSimmons它是在产品数组中添加产品的索引或位置。我把它命名为productId，您可以将它重命名为productindex。如果您想显示6种产品的产品信息，则可以在单击按钮事件时将产品索引的值传递为1、2、3、4、5和6。@johnsimons我们已在您的产品数组中添加了第一种产品。因此，它将被添加到索引0处。现在我们在按钮的点击事件中传递1作为产品索引，因此我们从传递的索引（即“1”）中减去1，以获得该产品在产品数组中的位置，即“0”。在给定的示例中，它将是[1-1]。

    function produits(tag, nom, price, imagesrc, description){
 this.Tag = tag;
 this.Nom = nom;
 this.Price = price;
 this.SRC = imagesrc;
 this.Description = description;
}

var produit = [];

//6x for my 6 products 
produit.push(new produits(1, "nom", 35, "path/to/img","Description"));

function showProduct(productId){
    document.getElementById("product_tag").innerHTML = produit[productId-1].Tag;
  document.getElementById("product_nom").innerHTML = produit[productId-1].Nom;
  document.getElementById("product_price").innerHTML = produit[productId-1].Price;
  document.getElementById("product_image").src = produit[productId-1].SRC;
  document.getElementById("product_description").innerHTML = produit[productId-1].Description;
}