使用for循环和String.fromCharCode()创建26个字母按钮

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

本文关键字：26个 创建 按钮 循环 for String fromCharCode 使用      更新时间：2023-09-26

下面是一些HTML代码为例:

<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>

这里是javascript部分:

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

这工作得很好，但是有很多冗余，我想通过使用for循环和方法String.fromCharCode()来消除这些冗余。我就是不知道该怎么做。

试试这个:

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>

试试这个。

<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;
}

这个解决方案像@Arvind的，但我认为最好使用attribute的html标签和设置onclick与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>

相关文章：