使用for循环和String.fromCharCode（）创建26个字母表字母按钮 [英] Creating 26 alphabet letter buttons with the for loop and String.fromCharCode()

问题描述

以下是一些HTML代码：

 < button onclick =setLetter（'A'）;> ; A< /按钮> 
< 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部分：

<$ p $ （字母）{
document.getElementById（'name'）。innerHTML = document.getElementById（'name'）。innerHTML + letter;



$ b $ p
$ b

这很好，但是有很多冗余，我想通过使用for循环和方法 String.fromCharCode（）删除基本。

试试这个。

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）; 
} 
} 
}）; 
函数setLetter（letter）{
 var div = document.getElementById（name）; 
 div.innerHTML = div.innerHTML + letter; 
 
 
 
 $ b这个解决方案就像@ Arvind's一样，但我认为最好使用属性的html标签，并设置 onclick 与函数 s。  
 
 
 
 
 

< ; div id =buttonsHolder>< / div>< div id =name>< / div>

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.

解决方案

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>

这篇关于使用for循环和String.fromCharCode（）创建26个字母表字母按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！