0
Je voudrais créer une nouvelle ligne avec le nom du produit, le coût du produit, la quantité de produit, la somme du produit et un bouton de suppression. Exactement comme la structure des deux premières lignes dans l'exemple. Je crois que je peux utiliser insertAdjacentHTML, mais je ne peux pas le faire fonctionner.Puis-je utiliser insertAdjacentHTML pour ajouter une longue chaîne de balises et de texte html?
J'ai défini le nom, unitPrice, quantityInput, itemSum et deleteButton. Ces cinq chaînes html que je voudrais ajouter à rowDiv et après ajouter rowDiv après la dernière ligne (dernier produit dans la liste). Qu'est-ce que je fais mal? Je joins le code ci-dessous:
fonction createNewItemRow:
function createNewItemRow() {
const newProductName = document.getElementById("new-product-name");
const newProductCostPerUnit = document.getElementById(
"new-product-cost-per-unit",
);
const name = `<div><span class="product-name">${newProductName.value}</span></div>`;
const unitPrice = `<div>$<span class="cost-per-unit">${newProductCostPerUnit.value}</span></div>`;
const quantityInput =
'<div><span>QTY</span><input type="text" name="quantity" class="quantity"></div>';
const itemSum = '<div>$<span class="item-sum">0.00</span></div>';
const deleteButton =
'<div><button class="btn btn-delete">Delete</button></div>';
const container = document.getElementById("container");
const rowItem = container.lastChild;
const rowDiv = document.createElement("div");
rowDiv.setAttribute("class", "row");
// USE insertAdjacentHTML and add:
const string = name + unitPrice + itemSum + deleteButton;
rowDiv.insertAdjacentHTML("beforeend", string);
// Append the rowDiv with the new data to after last row inside the container.
rowItem.appendChild(rowDiv);
}
function deleteItem(e) {
const del = e.currentTarget.parentElement.parentElement;
const parent = del.parentElement;
parent.removeChild(del);
getTotalPrice();
}
function getTotalPrice() {
const costPerUnit = document.getElementsByClassName("cost-per-unit");
const inputValue = document.getElementsByClassName("quantity");
const itemSum = document.getElementsByClassName("item-sum");
const totalPrice = document.getElementById("total-price");
let total = 0;
for (let i = 0; i < costPerUnit.length; i++) {
const sum = costPerUnit[i].innerHTML * inputValue[i].value;
itemSum[i].innerHTML = sum;
total += sum;
}
totalPrice.innerHTML = total;
}
function createNewItemRow() {
const newProductName = document.getElementById("new-product-name");
const newProductCostPerUnit = document.getElementById(
"new-product-cost-per-unit",
);
const name = `<div><span class="product-name">${newProductName.value}</span></div>`;
const unitPrice = `<div>$<span class="cost-per-unit">${newProductCostPerUnit.value}</span></div>`;
const quantityInput =
'<div><span>QTY</span><input type="text" name="quantity" class="quantity"></div>';
const itemSum = '<div>$<span class="item-sum">0.00</span></div>';
const deleteButton =
'<div><button class="btn btn-delete">Delete</button></div>';
const container = document.getElementById("container");
const rowItem = container.lastChild;
const rowDiv = document.createElement("div");
rowDiv.setAttribute("class", "row");
// USE insertAdjacentHTML and add:
const string = name + unitPrice + itemSum + deleteButton;
rowDiv.insertAdjacentHTML("beforeend", string);
// Append the rowDiv with the new data to after last row inside the container.
rowItem.appendChild(rowDiv);
}
function refreshItems(deleteButtons) {
for (var i = 0; i < deleteButtons.length; i++) {
deleteButtons[i].onclick = deleteItem;
}
}
window.onload = function() {
const calculatePriceButton = document.getElementById("calc-prices-button");
const createItemButton = document.getElementById("new-item-create");
const deleteButtons = document.getElementsByClassName("btn-delete");
refreshItems(deleteButtons);
};input {
border: solid 1px black;
}
#new-product-name {
width: 130px;
}
#new-product-cost-per-unit {
width: 120px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.row-new-product {
margin: 20px;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-delete {
color: #fff;
background-color: #cf000f;
border-color: #cf000f;
}
.quantity {
margin: 0 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="./js/index.js"></script>
<title>Ironhack cart</title>
</head>
<body>
<div id="container">
<div class="row">
<div>
<span class="product-name">IronBubble-head</span>
</div>
<div>
$
<span class="cost-per-unit">25</span>
</div>
<div>
<span>QTY</span>
<input type="text" name="quantity" class="quantity">
</div>
<div>
$
<span class="item-sum">0.00</span>
</div>
<div>
<button class="btn btn-delete">Delete</button>
</div>
</div>
<div class="row">
<div>
<span class="product-name">IronBubble-foot</span>
</div>
<div>
$
<span class="cost-per-unit">50</span>
</div>
<div>
<span>QTY</span>
<input type="text" name="quantity" class="quantity">
</div>
<div>
$
<span class="item-sum">0.00</span>
</div>
<div>
<button class="btn btn-delete">Delete</button>
</div>
</div>
</div>
<div class="row-new-product">
<div>
Product:
<input type="text" id="new-product-name">
</div>
<div>
Cost:
<input type="text" id="new-product-cost-per-unit">
</div>
<div>
<button class="btn btn-success" onclick="createNewItemRow()">Create</button>
</div>
</div>
<div class="wrapper ">
<button class="btn btn-success" id="calc-prices-button " onclick="getTotalPrice() ">Calculate Prices</button>
Total Price $
<span id="total-price">0.00</span>
</div>
</body>
</html>
Avez-vous essayé d'utiliser '' container.lastElementChild' au lieu de container.lastChild'? Parce que 'lastChild' peut être un noeud de texte. – Krusader
Votre question contient beaucoup trop de code. [Créer un exemple minimal] (https://stackoverflow.com/help/mcve) et [le transformer en un bloc de code runnable] (https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript- css-and-html-code-snippets /). – mercator