imme-emosol/naam.html

## naam.html
<!DOCTYPE html>
<html>
	<head>
		<title>Naam-ding</title>
		<script type="text/javascript">
var naam  =  function ()
{
	var geefNaam  =  function ( e )
	{
		var naam  =  document.getElementById( 'naam' ).value;
		if ( !naam )
		{
			alert( 'Er is geen naam ingevoerd.' );
			return false;
		}
		alert( 'De ingevoerde naam is:\n' + naam );
	}
	return function ( element , direction )
	{
		if ( !element )
			return false;
		element = document.getElementById( element );
		if ( !element )
			return false;

		/*
<!-- beforebegin --><p><!-- afterbegin -->foo<!--
beforeend --></p><!-- afterend -->
		*/
		if (
			direction !== 'beforebegin'
			&& direction !== 'afterbegin'
			&& direction !== 'beforeend'
			&& direction !== 'afterend'
		)
			direction = 'beforebegin';

		element.insertAdjacentHTML( direction , '' +
			'\n' + '		<h1>RekenMachine</h1>' +
			'\n' + '		<form action="#" method="post">' +
			'\n' + '			<dl>' +
			'\n' + '				<dt>' +
			'\n' + '					<label for="naam">Naam:</label>' +
			'\n' + '				</dt>' +
			'\n' + '				<dd>' +
			'\n' + '					<input type="text" id="naam" />' +
			'\n' + '				</dd>' +
			'\n' + '			</dl>' +
			'\n' + '			<button id="knopje">laat zien</button>' +
			'\n' + '		</form>' +
			'\n' + ''
		);
		element  =  document.getElementById( 'knopje' );
		if ( !element )
			return false;
		element.addEventListener(
			'click' ,
			geefNaam
		);
	};
}();
		</script>
		<style type="text/css">
form
{
	background-color  :  purple;
	color  :  yellow;
	padding  :  0.5ex 2ex;
}
		</style>
	</head>
	<body>
		<script id="n" type="text/javascript">
naam( 'n' );
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Naam-ding</title>
	<script type="text/javascript">
	var naam = function ()
	{
	var geefNaam = function ( e )
	{
	var naam = document.getElementById( 'naam' ).value;
	if ( !naam )
	{
	alert( 'Er is geen naam ingevoerd.' );
	return false;
	}
	alert( 'De ingevoerde naam is:\n' + naam );
	}
	return function ( element , direction )
	{
	if ( !element )
	return false;
	element = document.getElementById( element );
	if ( !element )
	return false;

	/*
	<!-- beforebegin --><p><!-- afterbegin -->foo<!--
	beforeend --></p><!-- afterend -->
	*/
	if (
	direction !== 'beforebegin'
	&& direction !== 'afterbegin'
	&& direction !== 'beforeend'
	&& direction !== 'afterend'
	)
	direction = 'beforebegin';

	element.insertAdjacentHTML( direction , '' +
	'\n' + ' <h1>RekenMachine</h1>' +
	'\n' + ' <form action="#" method="post">' +
	'\n' + ' <dl>' +
	'\n' + ' <dt>' +
	'\n' + ' <label for="naam">Naam:</label>' +
	'\n' + ' </dt>' +
	'\n' + ' <dd>' +
	'\n' + ' <input type="text" id="naam" />' +
	'\n' + ' </dd>' +
	'\n' + ' </dl>' +
	'\n' + ' <button id="knopje">laat zien</button>' +
	'\n' + ' </form>' +
	'\n' + ''
	);
	element = document.getElementById( 'knopje' );
	if ( !element )
	return false;
	element.addEventListener(
	'click' ,
	geefNaam
	);
	};
	}();
	</script>
	<style type="text/css">
	form
	{
	background-color : purple;
	color : yellow;
	padding : 0.5ex 2ex;
	}
	</style>
	</head>
	<body>
	<script id="n" type="text/javascript">
	naam( 'n' );
	</script>
	</body>
	</html>