Cursus Javascript: oefeningen op Formulieren

Toepassing: boodschappenlijstje

Maak een toepassing waarbij de gebruiker namen van artikels kan ingeven in een tekstvak.
Bij het drukken op een knop worden de artikels toegevoegd aan een keuzelijst.

Dubbelklikken op een item uit de lijst verwijdert dit item.

Maak gebruik van traditionele event afhandeling.

Bekijk de toepassing:

Toon /verberg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head> 
	<TITLE>Cursus Javascript - IVO Brugge</TITLE>
 	<link rel="stylesheet" type="text/css" href="vb.css">
<style type="text/css">
	select.lijst {
		width:150px;
		color:navy;
		background:#FFFF99;
	}
</style>
<script language= "JavaScript">
<!--
var kN; //knop toevoegen
var tA; //tekstvak nieuw artikel
var lA; //lijst artikels

function initieer(){
	kN = new getObj("knopnieuw");
	tA = new getObj("artikel");
	lA = new getObj("lijst");
	
	kN.obj.onclick = nieuwArtikel;
	lA.obj.ondblclick = verwijderArtikel;
}

function nieuwArtikel(){
	var nieuw = tA.obj.value;
	if(nieuw != ""){
		lA.obj.options[lA.obj.length] = new Option(nieuw);
		tA.obj.value = "";
		tA.obj.select();
	}
}

function verwijderArtikel(){
	if(lA.obj.selectedIndex != -1){
		lA.obj.options[lA.obj.selectedIndex] = null;
	}
}

function getObj(name)
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
  }
  else if (document.all)
  {
	this.obj = document.all[name];
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
  }
}
//-->
</script>
</head>

<body onload="initieer()">
<h1>Boodschappenlijst</h1>
Artikel toevoegen: <input type="text" id="artikel"><input type="button" id="knopnieuw" value="+">
<p><select id="lijst" class="lijst" size="10">
</select>

</body>
</html>