stackoom
  简体   繁体   中英

Insert HTML element

 原文  2022-07-05 17:54:51  9   1    javascript/ html/ css/ append

Question

I am trying to insert an HTML element (in my file it is called "baseketTotal"). This element is something like a checkout form that has the total price and etc... The thing is that I am trying to put it only on the last movie in the list which I add to the bag. In this link, it is a picture of how it looks now. So I need to display it only on the last movie, no matter if the list has 1,2, or 10 movies. Only on the last one.

在此处输入图像描述

HTML 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Filmovizija</title>
  </head>
  <body>
    <h1>Filmovizija</h1>
    <div class="prozor"></div>
    <h2>Shooping bag</h2>
    <div class="shooping-cart"></div>

    <script src="script.js"></script>
  </body>
</html>

css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #22254b;
  font-family: "Poppins", sans-serif;
}

h1 {
  text-align: center;
  color: #eee;
  font-family: inherit;
  margin-top: 30px;
  margin-bottom: 30px;
}

.prozor {
  display: flex;
  flex-wrap: wrap;
}

.movie {
  width: 300px;
  border-radius: 4px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
  background-color: #373b69;
  margin: 25px;
}

.movie-info {
  color: #eee;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  letter-spacing: 1px;
  align-items: center;
}

.movie img {
  width: 100%;
  border-bottom: 1px solid white;
  height: 450px;
}

.movie-info h3 {
  font-weight: 300;
  margin: 0;
}

.movie-info span {
  font-weight: 400;
  border-radius: 3px;
  background-color: #22254b;
  padding: 3px 7px;
}

.movie .kupi {
  color: #eee;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  padding-bottom: 15px;
  letter-spacing: 1px;
  align-items: center;
}

.movie .kupi button {
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 500;
}

.movie .kupi span {
  font-size: 18px;
  font-weight: 500;
}

/* ----------------------------------- SHOOPING CART ------------------------------------------------ */

.shooping-cart {
  border-top: 2px solid rgb(214, 214, 214);
  width: 1000px;
  height: 500px;
  margin-left: 25px;
}

h2 {
  color: whitesmoke;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 20px;
  margin-left: 25px;
}

.shooping-cart .single-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 2px dotted grey;
}

.shooping-cart .single-item span {
  background-color: rgb(255, 255, 255);
  margin-left: 20px;
  border-radius: 50%;
  color: black;
}

.smallPic {
  height: 70px;
  width: 70px;
  border: 1px solid grey;
}

.shooping-cart .single-item .opis {
  align-items: center;
  display: flex;
  flex-direction: column;
  color: white;
  font-family: inherit;
}

.shooping-cart .single-item .opis h2 {
  font-weight: 300;
  margin-bottom: 5px;
}

.shooping-cart .single-item .opis h3 {
  font-size: 14px;
  font-weight: bold;
  color: antiquewhite;
  text-transform: uppercase;
}

.shooping-cart .single-item .kolicina input {
  width: 30px;
  text-align: center;
}

.shooping-cart .single-item .kolicina button {
  padding: 2px 6px;
  background-color: whitesmoke;
  border: 0;
}

.single-total {
  color: white;
  margin-right: 20px;
}

/* ----------------------------------- SHOOPING CART TOTAL ALL ------------------------------------------------ */

.totalKosara {
  float: right;
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 160px;
  margin-top: 15px;
}

.potvrdi {
  display: flex;
  width: 100%;
  margin: 20px 0;
  justify-content: space-between;
  text-align: center;
}

.potvrdi .sub,
.price {
  color: #eee;
  font-weight: bold;
  padding: 5px;
}

.text {
  color: white;
  font-size: 14px;
  text-align: center;
}

.blue {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.blue button {
  width: 100%;
  border-radius: 2px;
  border: 0;
  padding: 10px;
  background-color: #0b1050;
  color: #eee;
  font-family: inherit;
  border: 1px solid grey;
}

scriptJS
const options = {
  method: "GET",
  headers: {
    "X-RapidAPI-Key": "cd782e9b03mshbd50bac036f1802p16179djsn48c38f33f263",
    "X-RapidAPI-Host": "online-movie-database.p.rapidapi.com",
  },
};

const main = document.querySelector(`.prozor`);
const shoopingCart = document.querySelector(`.shooping-cart`);
const checkoutBtn = document.querySelector(`.checkoutBtn`);

fetch(
  "https://online-movie-database.p.rapidapi.com/auto-complete?q=hacker",
  options
)
  .then((response) => response.json())
  .then((data) => {
    const list = data.d;
    list.map((item) => {
      const name = item.l;
      const rank = item.rank;
      const price = Math.floor(rank / 100);
      const poster = item.i.imageUrl;
      const movie = ` <div class="movie">
               <img src=${poster} alt="${name}" />
                           <div class="movie-info">
                              <h3>${name}</h3>
                              <span>#${rank}</span>
                            </div>
                            <div class="kupi">
                              <button class="addToBag">Kupi film</button>
                              <span>${price} HRK</span>
                            </div>
                    </div>`;
      main.innerHTML += movie;

      //---------------------------------- add to basket --------------------------//

      const button = document.querySelectorAll(`.addToBag`);
      button.forEach((button) => {
        button.addEventListener(`click`, function (e) {
          const clicked = e.target;
          const kupi = clicked.closest(`.kupi`);
          const cijena2 = kupi.querySelector(`span`).innerText;
          const cijena = cijena2.split(` `)[0];
          const parent = kupi.closest(`.movie`);
          const imeFilma = parent.querySelector(`.movie-info h3`).innerText;
          const imgSrc = parent.querySelector(`img`).src;

          const singleItem = `
         
             <div class="single-item">
              <span class="material-symbols-outlined deleteItem"> close </span>
               <img src=${imgSrc} alt="aaa" class="smallPic" />
                   <div class="opis">
                       <h2>${imeFilma}</h2>
                    </div>
                   <div class="kolicina">
                      <button class="plus">+</button>
                     <input type="text" value="1" max="3" min="1" class="input"/>
                     <button class="minus">-</button>
                   </div>
               <div class="single-total" data-value="${cijena}">${cijena} KN</div>
             </div>
            
          `;

          shoopingCart.innerHTML += singleItem;

          const basketTotal = `
          <div class="totalKosara vidljivo">
        <div class="potvrdi">
          <p class="sub">Subtotal</p>
          <p class="price">675 KN</p>
        </div>
        <div class="text">
          <p>Shipping, taxes and discounts calculated at checkout.</p>
        </div>
        <div class="blue"><button>Checkout</button></div>
      </div>
          `;

          const removeElement = function () {
            const nodes = document.querySelectorAll(`.single-item`);
            let lastNode = nodes[nodes.length - 1];
            console.log(lastNode);
          };

          removeElement();

          //OBRISI ITEM
          const deleteItem = document.querySelectorAll(`.deleteItem`);
          deleteItem.forEach((btn) => {
            btn.addEventListener(`click`, function (e) {
              const mainEl = e.target.closest(`.single-item`);
              mainEl.parentNode.removeChild(mainEl);
              button.disabled = false;
            });
          });

          //add more movies btn
          const plusBtn = document.querySelectorAll(`.plus`);
          const minusBtn = document.querySelectorAll(`.minus`);

          plusBtn.forEach((btn) => {
            btn.addEventListener(`click`, function (e) {
              let plus = e.target;
              let parent = plus.closest(`.kolicina`);
              let input = parent.querySelector(`.input`);
              let singleEl = parent.closest(`.single-item`);
              let singleTotal = singleEl.querySelector(`.single-total`);

              input.value++;
              if (input.value > 3) input.value = 3;
              singleTotal.innerText = `${
                singleTotal.dataset.value * input.value
              } KN`;
            });
          });

          minusBtn.forEach((btn) => {
            btn.addEventListener(`click`, function (e) {
              let plus = e.target;
              let parent = plus.closest(`.kolicina`);
              let input = parent.querySelector(`.input`);
              let singleEl = parent.closest(`.single-item`);
              let singleTotal = singleEl.querySelector(`.single-total`);

              input.value--;
              console.log(input.innerText);
              if (input.value < 1) input.value = 1;
              singleTotal.innerText = `${
                singleTotal.dataset.value * input.value
              } KN`;
            });
          });
        });
      });
    });
  })
  .catch(

(err) => console.error(err));

1 answers

solution1
 0  2022-07-05 18:52:02

I couldn't understand clearly what you are trying to say. But as far as considered to append a child to parent div you can use

parentDiv.appendChild(childElement);

Appreciate it if you can make the question more understable.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Insert an HTML element in a contentEditable element Insert a Class or ID to HTML element create element and then insert html tag Insert HTML after element with jQuery How to insert html in to svg element Insert HTML element into DOM with React Insert html code after element Insert html element into a previously dynamically inserted element? Insert html element above element closest to mouse Trying to insert an HTML Element into an another HTML Element using Javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM