Блог

Главная - Вопросы по программированию - Напишите несколько раз точный html-код на javascript

Напишите несколько раз точный html-код на javascript

#javascript #html #for-loop

#javascript #HTML #for-цикл

Вопрос:

Я пытаюсь заставить свой код несколько раз повторять эти html-элементы на моей странице, но я застрял, мой код работает на данный момент, но я не могу добавить html-теги, которые имеют те же родители, и я не знаю почему…

Что я хочу сделать, так это «витринный» веб-сайт для магазина Etsy моего друга… Я хочу, чтобы на странице отображались все его статьи… Итак, мне нужно создать цикл, который записывает столько HTML-элементов, сколько статей…

Вы, ребята, можете мне помочь?

Кстати, я новичок в JavaScript 😉

 let productCount = 8;

for (let i = 0; i <= productCount; i  ) { // on repète la boucle autant de fois qu'il y a d'articles

      const newContainer = document.createElement('article');
      let container = document.getElementById("product-list");
      newContainer.classList.add("product");

      const newContent = document.createElement('div');
      let content = document.getElementsByTagName("article");
      newContent.classList.add("product-content");

      const newProductInfo = document.createElement('div');
      let productInfo = document.querySelector("#product-list > article > product-content");
      newProductInfo.classList.add("product-info");

      const newProductTitleColumn = document.createElement('div');
      let productTitleColumn = document.querySelector("#product-list > article > product-content >  product-info");
      newProductTitleColumn.classList.add("product-title-column");

      const newProductRow = document.createElement('div');
      let productRow = document.querySelector("#product-list > article > product-content > product-info > product-title-column");
      newProductRow.classList.add("product-row");

      const newProductTitle = document.createElement('h2');
      let productTitle = document.querySelector("#product-list > article > product-content > product-info > product-title-column > product-row");
      newProductTitle.classList.add("product-title");


      container.appendChild(newContainer).appendChild(newContent).appendChild(newProductInfo).appendChild(newProductTitleColumn).appendChild(newProductRow).appendChild(newProductTitle);

   

};  
 * {
  padding: 0;
  margin: 0;
  height: auto;
  list-style: none;
  font-family: "Lato", sans-serif;
  color: #363636;
  text-decoration: none;
}

.product-list {
  display: flex;
  justify-content: center;
}

.product-content {
  display: flex;
  align-items: center;
  padding: 50px;
  margin: 50px;
  width: fit-content;
  border-radius: 25px;
  box-shadow: 0px 0px 50px #bdbdbd;
}

.product-img {
  width: 350px;
  height: 350px;
  border-radius: 25px;
}

.product-title-column {
  display: flex;
  flex-direction: column;
}
.product-info {
  height: 350px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 350px;
}

.product-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-line {
  display: flex;
  justify-content: center;
  width: 350px;
  height: 3px;
  margin-top: 5px;
  background-color: #363636;
}

.product-title {
  font-weight: 900;
  font-size: 2em;
}

.product-price {
  font-weight: 600;
  font-size: 2em;
}

.product-description {
  font-size: 1.25em;
}

.shipping-info {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin: 10px;
}

.product-quantity {
  text-align: right;
  font-size: 1.25em;
}

.product-link {
  display: block;
  font-size: 1.5em;
  text-align: center;
  padding: 25px;
  font-weight: 800;
  border-radius: 15px;
  color: white;
  background-color: #eb6d20;
}  
 <article class="product">
    <div class="product-content">
      <img src="Images/Products/IMG_4303.JPG" class="product-img">
      <div class="product-info">
        <div class="product-title-column">
        <div class="product-row">
          <h2 class="product-title">Bavoir élastique</h2>
          <h2 class="product-title">-</h2>
          <h2 class="product-price">5€</h2>
        </div>
        <p class="product-line"></p>
        </div>
        
        <div class="product-column">
        <p class="product-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Recusandae minus tenetur
        ea placeat odit et doloremque laudantium incidunt blanditiis minima quaerat adipisci, nesciunt
        distinctio
        possimus quas odio nostrum rem commodi.</p>
        <div class="shipping-info">
          <p class="product-quantity">Livraison gratuite</p>
          <p class="product-quantity">9 en stock <i class="fas fa-check"></i></p>
        </div>
        <a class="product-link" href="#">Acheter sur Etsy</a>
      </div>
    </div>
    </div>
  </article>

Комментарии:

1. document.getElementById("product-list"); Я не вижу ни одного элемента с таким идентификатором.

2. О да, извините, этот код находится между этими тегами: <div class=»product-list» id=»product-list»></div>

3. Вы слышали об <template> элементе? Его использование позволит вам вводить HTML-код каждого элемента, а затем клонировать весь блок, заполняя детали продуктов по мере необходимости. Фактически, страница MDN для it использует элементы продукта в качестве примера. 🙂 developer.mozilla.org/en-US/docs/Web/HTML/Element/template

4. Большое вам спасибо! Я думаю, что это именно то, что мне нужно!