javascript - Creating 26 alphabet letter buttons with the for loop and String.fromCharCode() -

here html code example:

<button onclick="setletter('a');">a</button> <button onclick="setletter('b');">b</button> <button onclick="setletter('c');">c</button> <button onclick="setletter('d');">d</button> <button onclick="setletter('e');">e</button> <button onclick="setletter('f');">f</button> <button onclick="setletter('g');">g</button> <button onclick="setletter('h');">h</button> <button onclick="setletter('i');">i</button> <button onclick="setletter('j');">j</button> ... ...  <div id="name"></div> 

here javascript part:

function setletter(letter) {     document.getelementbyid('name').innerhtml = document.getelementbyid('name').innerhtml + letter; } 

this works fine, has lot of redundancy, want remove basicly using loop , method string.fromcharcode(). cant figure out how it.

try this.

html

<div id="buttonsholder"></div> <div id="name"></div>   

javascript

window.addeventlistener( "load", function( windowloade ) {     var p, letter, button, holder;     holder = document.getelementbyid( "buttonsholder" );     ( var = 65; <= 90; i++ ) {         if ( == 65 || == 75 || == 84 ) {             p = document.createelement( "p" );         }         letter = string.fromcharcode( );         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 ( == 74 || == 83 || == 90 ) {             holder.appendchild( p );         }     } } ); function setletter( letter ) {     var div = document.getelementbyid( "name" );     div.innerhtml = div.innerhtml + letter; } 

this solution @arvind's, think better use attribute of html tag , set onclick functions.

window.addeventlistener( "load", function( windowloade ) {      var p, letter, button, holder;      holder = document.getelementbyid( "buttonsholder" );      ( var = 65; <= 90; i++ ) {          if ( == 65 || == 75 || == 84 ) {              p = document.createelement( "p" );          }          letter = string.fromcharcode( );          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 ( == 74 || == 83 || == 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>