0

here is some HTML Code as 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 the javascript part:

function setLetter(letter) {
    document.getElementById('name').innerHTML = document.getElementById('name').innerHTML + letter;
}

This works perfectly fine, but has a lot of redundancy, which I want to remove basicly by using the for loop and the method String.fromCharCode(). I just cant figure out how to do it.

anar khalilov
  • 16,993
  • 9
  • 47
  • 62
CuttingTheAces
  • 51
  • 1
  • 8

2 Answers2

3

Try this:

var html = '';
var c;
for (var i = 65; 90 >= i; i++) {// A-65, Z-90
  c = String.fromCharCode(i);
  html += '<button onclick="setLetter(\'' + c + '\');">' + c + '</button>';
}
document.getElementById('box').innerHTML = html;

var setLetter = function(x) {
  document.getElementById('name').innerHTML += x;
};
<div id="box"></div>
<div id="name"></div>
  • when I test the code in my own HTML and jscript the buttons are not shown but when i test it on jsfiddle it works..why is that? I mean when i put the javascript code into the html it works but when i do it in seperate file the buttons wont show up – CuttingTheAces Jun 03 '15 at 12:44
2

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" );
    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 functions. 

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>
ostapische
  • 1,572
  • 2
  • 12
  • 26
  • when I test the code in my own HTML and jscript the buttons are not shown but when i test it on jsfiddle it works..why is that? I mean when i put the javascript code into the html it works but when i do it in seperate file the buttons wont show up – CuttingTheAces Jun 03 '15 at 12:42
  • @CuttingTheAces it cause you add this script in `head` section and when it initializes `document.body` doesn't exist. Try this http://jsfiddle.net/Lj35L9w2/1/ – ostapische Jun 03 '15 at 14:20
  • ok nice it works now. what do i need to change to get it so the buttons will be above the letters not other way around? – CuttingTheAces Jun 03 '15 at 14:45
  • @CuttingTheAces I'm update answer. You just need to add some element before `name` div and add buttons to this element instead `document.body`. – ostapische Jun 03 '15 at 14:56
  • ok good. one last thing how do i make a

    /paragraph in javascript i want the buttons to be in 3 rows like: ABCDEFGHIJ KLMNOPQRS TUVWXYZ but among eachother not side by side. like on the keyboard

     – CuttingTheAces Jun 03 '15 at 15:16