ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added tag26

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-20 09:55:44 +02:00
parent d0d53a1b3d
commit 0a69891333
12 changed files with 404 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
03_dom/uebungen/u15_tasse-01001/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -97,13 +97,38 @@
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
const productList = $('#product_specification');
const orderedList = $('.model');
const selectBox = $('#buy_form select');
// Übung 15: — Teil 7
// Verändere die Produktseite der Binär-Tasse mithilfe von JavaScript. Du kannst wieder die JS-Konsole verwenden.
// 1. Füge in der Liste der Product Specifications mithilfe von JavaScript folgenden Listenpunkt hinzu:
// Capacity: 11 oz.
$('#product_specification').innerHTML += '<li>Capacity: 11 oz.</li>';
const newListItem = document.createElement('li');
newListItem.textContent = 'Capacity: 11 oz.';
newListItem.style.color = 'orange';
newListItem.style.backgroundColor = 'black';
productList.appendChild(newListItem); //productList.append(newListItem)
// 2. Erweitere die Select-Box neben dem buy-Button mithilfe von JavaScript um den Eintrag: 5 items.
const newOption = document.createElement('option');
newOption.textContent = '5 items';
selectBox.append(newOption);
// newOption.style.textContent = 'red';
$('#buy_form select').innerHTML += '<option>5 items</option>';
// optional Listenpunkt in ordered List (.model) hinzugefügt
const listItem2 = document.createElement('li');
listItem2.textContent = 'fuente item hinzugefügt als Newitem';
listItem2.style.color = 'orange';
listItem2.style.backgroundColor = 'black';
orderedList.append(listItem2);
}
</script>
</body>