Creating 26 Alphabet Letter Buttons With The For Loop And String.fromCharCode()
here is some HTML Code as example:
Javascript
window.addEventListener( "load", function( windowLoadE ) {
var p, letter, button, holder;
holder = document.getElementById( "buttonsHolder" );
for ( var i = 65; i <= 90; i++ ) {
if ( i == 65 || i == 75 || i == 84 ) {
p = document.createElement( "p" );
}
letter = String.fromCharCode( i );
button = document.createElement( "button" );
button.innerHTML = letter;
button.setAttribute( "data-letter", letter );
button.onclick = function( e ) { setLetter( this.getAttribute( "data-letter" ) ); };
p.appendChild( button );
if ( i == 74 || i == 83 || i == 90 ) {
holder.appendChild( p );
}
}
} );
function setLetter( letter ) {
var div = document.getElementById( "name" );
div.innerHTML = div.innerHTML + letter;
}
This solution like @Arvind's, but I think better use attribute
of html tag and set onclick
with function
s.
window.addEventListener( "load", function( windowLoadE ) {
var p, letter, button, holder;
holder = document.getElementById( "buttonsHolder" );
for ( var i = 65; i <= 90; i++ ) {
if ( i == 65 || i == 75 || i == 84 ) {
p = document.createElement( "p" );
}
letter = String.fromCharCode( i );
button = document.createElement( "button" );
button.innerHTML = letter;
button.setAttribute( "data-letter", letter );
button.onclick = function( e ) { setLetter( this.getAttribute( "data-letter" ) ); };
p.appendChild( button );
if ( i == 74 || i == 83 || i == 90 ) {
holder.appendChild( p );
}
}
} );
function setLetter( letter ) {
var div = document.getElementById( "name" );
div.innerHTML = div.innerHTML + letter;
}
<div id="buttonsHolder"></div>
<div id="name"></div>
Post a Comment for "Creating 26 Alphabet Letter Buttons With The For Loop And String.fromCharCode()"