HTML/CSS/JS: Warum funktioniert meine bindDelete-Funktion nicht und wie kann ich die Preisangaben untereinander formatieren?
Hi, ich habe an einen Spezialisten eine Frage:
import Order from './Order.js';
import ArticleModel from './ArticleModel.js';
export default function UserOrderViewHandler(articleModel) {
this.articleModel = articleModel;
this.order = new Order(-1, null, [], 0, 0, 0, 0, 0, false);
}
UserOrderViewHandler.prototype.renderPage = function() {
let body = document.getElementsByTagName('body')[0];
body.innerHTML = "";
body.innerHTML = `<div class="container">
<sidebar>
<h1 class="mb-4">Unser Sortiment</h1>
<div id="articleList">
<div class="row space-between">
<div class="col-md-4 mb-4">
<div class="card" data-index="0">
<div>
<h2>Salamipizza</h2>
<p>Halbe hausgemachte Pizza mit Käse und regionaler Salami</p>
<p><strong>6.50 €</strong></p>
<button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card" data-index="1">
<div>
<h2>Hamburger</h2>
<p>Burger mit österreichischem Rindfleisch, Ketchup und Senf</p>
<p><strong>6.00 €</strong></p>
<button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card" data-index="2">
<div>
<h2>Wochenmenü</h2>
<p>Frittatensuppe --- Spaghetti Bolognese --- Muffin</p>
<p><strong>12.50 €</strong></p>
<button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
</div>
</div>
</div>
</div>
</div>
</sidebar>
<sidebar>
<h1 class="mb-4 extramargin">Bestellung</h1>
<ul id="order"></ul>
<div class="form-group">
<label for="pickupTime">Gewünschte Abholzeit:</label>
<input type="time" id="pickupTime" class="form-control">
</div>
</sidebar>
</div>`;
}
UserOrderViewHandler.prototype.renderOrder = function() {
let orderElement = document.getElementById('order');
orderElement.innerHTML = "";
orderElement.className = "list-group";
let i = 0;
for (let article of this.order.articleList) {
let articleElement = document.createElement('li');
articleElement.className = "list-group-item d-flex justify-content-between align-items-center";
articleElement.innerHTML = `
<div>1 x ${article.name}      ${article.price.toFixed(2)} €</div>
<button class="delBtn btn btn-danger btn-sm" data-index="${i}">Entfernen</button>
`;
orderElement.appendChild(articleElement);
i++;
}
}
UserOrderViewHandler.prototype.bindAddBtn = function() {
let buttons = document.getElementsByClassName('addBtnClss');
const that = this;
for (let button of buttons) {
button.addEventListener('click', function() {
let index = this.closest('.card').getAttribute('data-index');
let article = that.articleModel.getByIndex(index);
if (article) {
that.order.addArticle(article);
that.renderOrder();
}
});
}
}
UserOrderViewHandler.prototype.bindDeleteBtn = function() {
let orderElement = document.getElementById('order');
orderElement.addEventListener('click', function(event) {
if (event.target.classList.contains('delBtn')) {
let index = event.target.getAttribute('data-index');
that.order.deleteArticle(index);
that.renderOrder();
}
});
}
- Warum funktioniert meine bindDelete-Funktion nicht, um die li-Elemente wieder zu löschen?
- Wie kann ich es schaffen, dass der Preis von jedem li-Element genau so untereinander ist, sodass man ihn schön zusammenrechen könnte:
Danke für die Hilfe.
1 Antwort
Warum funktioniert meine bindDelete-Funktion nicht, um die li-Elemente wieder zu löschen?
Die Variable that wird von dir nicht definiert. Entweder du packst die Definition mit an den Funktionsanfang:
const that = this;
oder du nutzt zum einen eine Arrow-Funktion, um den Event Handler zu definieren und zum anderen this statt that.
button.addEventListener('click', () => {
/* ... */
this.order.addArticle(article);
this.renderOrder();
Wie kann ich es schaffen, dass der Preis von jedem li-Element genau so untereinander ist, sodass man ihn schön zusammenrechen könnte:
Es gibt verschiedene Wege:
- Verwende keine Liste, sondern eine Tabelle mit festen Spaltenbreiten; ordne Name, Preis und Button dabei in unterschiedliche Spalten ein
- Packe die jeweiligen Angaben (Name, Preis) in einzelne (span-)Elemente. Gib denen mit CSS (width) eine entsprechende Breite oder ordne die Elemente mit einem CSS Grid an (via grid-template-columns kannst du die Spaltenbreiten vorgeben)
Zusätzlich wäre es wohl besser, die Preise mit CSS rechtsbündig auszurichten (text-align: right).
Zuletzt noch ein paar Anmerkungen zu deinem restlichen geteilten Code:
1) Diese Zeile ist überflüssig:
body.innerHTML = "";
Du überschreibst den Inhalt des body-Elements doch im Anschluss gleich noch einmal.
Wenn der Inhalt, den du in renderPage setzt, im Übrigen initial beim Laden der Seite angezeigt werden soll, würde ich ihn auch nicht dynamisch mit JavaScript einbinden, sondern direkt von Anfang an im body-Bereich ausliefern.
Mehr Sinn würde es m.E. machen, die konkreten Inhalte (Artikelname, Beschreibung, Preis, ID) in ein JSON-Objekt auszulagern und dann die einzelnen Artikelelemente via Schleife zu generieren. Statt mit innerHTML zu arbeiten, würde sich ein template-Element für diesen Fall gut eignen.
2) Es gibt kein HTML-Element namens sidebar. Naheliegend zu dem wäre ein aside-Element.
3) Solltest du strong allein aus dem Grund nutzen, den Preis visuell zu formatieren, dann entferne es und style den Text stattdessen mit CSS (siehe font-weight).
