Created
November 24, 2011 16:58
-
-
Save imme-emosol/1391804 to your computer and use it in GitHub Desktop.
stukje javascript eerstejaars
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment