Einkaufszettel

Ich habe mir gedacht, wir könnten uns einen kleinen Einkaufszettel mit Hilfe eines Arrays bauen.
Dieses Beispiel habe ich immer in meinen Unterricht eingebaut und ich denke, es veranschaulicht ganz gut das Arbeiten mit Arrays.

Was benötigen wir:
  • Einen Einkaufszettel (ein DIV oder ein Textarea),
  • ein Eingabefeld,
  • einen Button zu Übertrag,
  • einen Button um den letzten Eintrag zu löschen,
  • einen Button um alles zu löschen,
  • und die dazugehörigen Funktionen.
    • store()
    • write()
    • delLastEntrie()
    • delAllEntries()
Das war es dann auch schon.

Kopiert Euch gerne den Code und probiert es aus: Code
Einkaufszettel





Code 

HTML:

<span class="headline">Einkaufszettel</span>				
<div id="zettel" class="einkauf">
</div>
<div class="button-wapper">
	<input type="text" name="eingabe" value="" 
	class="eingabe" placeholder="Bitte eintragen">
	<br>
	
	<input type="button" id="write" name="write" 
	class="mybutton" value="Eintrag schreiben" 
	onClick="store()"><br>
	
	<input type="button" id="del_last_entrie" 
	name="del_last" class="mybutton" 
	value="Lösche letzten Eintrag" 
	onClick="delLastEntrie()"><br>
	
	<input type="button" id="del_all_entries" 
	name="del_all_last" class="mybutton" 
	value="Lösche alle Einträge" 
	onClick="delAllEntries()"><br>
</div>






CSS:
.einkauf{
	min-height:80px;
	border:1px solid white;
	padding:5px;
	margin:10px;
}

input.eingabe{
	width:250px;
	height:20px;
	margin-bottom:20px;
	color:black;
}

.button-wapper{
	text-align:center;
}

input.mybutton{
	width:200px;
	height:25px;
	color:black;
	text-align:center;
	padding:0px;
}






JavaScript:

// Eingabefeld
const eingabe = document.querySelector('input[name=eingabe]');

// Einkaufszettel
const zettel = document.querySelector('#zettel');

// Unser Array
const einkauf 	= new Array; 

// Zählt die Durchläufe
let countWrite 	= 0;

// Nur um das Array zu füllen
function store(){
	// Nur wenn was übergeben wird
	if(eingabe.value != ''){
		einkauf[countWrite++] = eingabe.value;
		write();
	}
}

// Den Zettel befüllen
function write(){
	
	// Zur Sicherheit  nur wenn 
	// schoneinmal geschrieben wurde
	if(countWrite > 0){
		let text = '';
		for(let i = 0; i < einkauf.length; i++){
			text += einkauf[i]+"<br>";
		}
		zettel.innerHTML = text;
		eingabe.value = ''; // Eingabefeld löschen
		
		// Fokus auf das Eingabefeld setzten
		eingabe.focus(); 
	}
} 

// Letzten Eintrag löschen
function delLastEntrie(){
	// Zur Sicherheit  nur wenn 
	// schoneinmal geschrieben wurde
	if(countWrite > 0){
		// Löschen letzten Eintrag
		einkauf.pop(); 
		// Zettel leeren
		zettel.innerHTML = '';
		// Eines abziehen, 
		// damit der Counter wieder stimmt
		countWrite--;
		write(); // neu schreiben
	}
}

// Alle Einträge löschen
function delAllEntries(){
	// Zur Sicherheit  nur wenn 
	// schoneinmal geschrieben wurde
	if(countWrite > 0){
		// Alle Einträge des Arrays löschen
		einkauf.length = 0;
		// Counter auf 0 setzten
		countWrite = 0;
		// Zettel leeren
		zettel.innerHTML = '';
		write(); // neu schreiben
	}
}