我在脚本标签后面放置的所有内容都来自 html/js 中的脚本标签

问题描述 投票：0回答：0

我正在制作一个基本的电子商务应用程序，但我陷入了项目的一个超级简单和愚蠢的部分

image

我尝试到处移动脚本标签，但没有得到它。 我希望在显示产品后显示购物车项目

let url = "https://delta-website.vercel.app/api/inductions/get-products";
let cartItems = [];

fetch(url)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    let a1 = data;
    [a1] = Object.values(a1);
    for (let a in a1) {
      let div1 = document.createElement("div");
      let b = a1[a]["id"];
      div1.id = b;
      div1.innerHTML += a1[a]["model"];
      div1.innerHTML += "<br>Base Price : " + a1[a]["basePrice"];

      div1.innerHTML += "<br><h4>RAM : </h4>";

      let radio1 = document.createElement("input");
      radio1.name = b + "1";
      radio1.id = 1;
      radio1.type = "radio";
      let label1 = document.createElement("label");
      radio1.value = 0;
      label1.appendChild(radio1);
      label1.innerHTML +=
        a1[a]["RAM"][0]["size"] + " : " + a1[a]["RAM"][0]["price"] + "<br>";
      div1.appendChild(label1);

      let radio2 = document.createElement("input");
      radio2.name = b + "1";
      radio2.id = 2;
      radio2.type = "radio";
      let label2 = document.createElement("label");
      radio2.value = 1;
      label2.appendChild(radio2);
      label2.innerHTML +=
        a1[a]["RAM"][1]["size"] + " : " + a1[a]["RAM"][1]["price"] + "<br>";
      div1.appendChild(label2);

      div1.innerHTML += "<br><h4>Storage : </h4>";

      radio1 = document.createElement("input");
      radio1.id = 3;
      radio1.name = b;
      radio1.type = "radio";
      let label3 = document.createElement("label");
      radio1.value = 0;
      label3.appendChild(radio1);
      label3.innerHTML +=
        a1[a]["storage"][0]["type"] +
        " " +
        a1[a]["storage"][0]["size"] +
        " : " +
        a1[a]["storage"][0]["price"] +
        "<br>";
      div1.appendChild(label3);

      radio1 = document.createElement("input");
      radio1.name = b;
      radio1.id = 4;
      radio1.type = "radio";
      let label4 = document.createElement("label");
      radio1.value = 1;
      label4.appendChild(radio1);
      label4.innerHTML +=
        a1[a]["storage"][1]["type"] +
        " " +
        a1[a]["storage"][1]["size"] +
        " : " +
        a1[a]["storage"][1]["price"] +
        "<br>";
      div1.appendChild(label4);

      let button = document.createElement("button");
      button.innerHTML = "add to cart";
      button.id = b;
      button.onclick = function() {
        // Add the selected item to the cart
        let selectedItem = {
          model: a1[a]["model"],
          basePrice: a1[a]["basePrice"],
          selectedRAM: div1.querySelector("input[name='" + b + "1']:checked").value,
          selectedStorage: div1.querySelector("input[name='" + b + "']:checked").value,
        };
        cartItems.push(selectedItem);

        // Update the shopping cart display
        updateCartDisplay();
      };
      div1.appendChild(button);

      document.body.appendChild(div1);;
    }
  });


function updateCartDisplay() {
  let cartList = document.getElementById("cart-items");
  cartList.innerHTML = ""; // Clear the current cart display

  // Iterate through the cart items and display them
  for (let item of cartItems) {
    let li = document.createElement("li");
    li.innerHTML =
      `${item.model} - Base Price: $${item.basePrice}, ` +
      `Selected RAM: ${item.selectedRAM}, Selected Storage: ${item.selectedStorage}`;
    cartList.appendChild(li);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Delta Project Front End</title>
  <style>
    div {
      display: inline-block;
      margin-left: 40px;
    }
  </style>
</head>

<body>
  <h3>Products : </h3>
  <script src="sketch.js"></script>
  <div>
    <h3>Cart Items</h3>
    <ul id="cart-items"></ul>
  </div>
</body>

</html>
javascript html e-commerce liveserver
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.