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

时间:2015-06-03 10:03:12

标签: javascript button for-loop alphabet

这里有一些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()基本删除。我只是想弄清楚该怎么做。

2 个答案:

答案 0 :(得分:3)

试试这个:

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>

答案 1 :(得分:1)

试试this

HTML

class CostCalculator:
    __item = ""
    __cost_of_item = 0.0
    __tax = 0.0
    __tip = 0.0

    def set_item(self, item):
        self.__item = item

    def get_name(self):
        return self.__item

    def set_cost_of_item(self, cost_of_item):
        self.__cost_of_item = float(cost_of_item)

    def get_cost_of_item(self):
        return self.__cost_of_item

    def get_tax(self):
        self.__tax = self.__cost_of_item * 0.0875
        return self.__tax

    def get_tip(self):
        self.__tip = self.__cost_of_item * 0.15
        return self.__tip


item = ""
cost = 0.0
totalTip = 0.0
totalTax = 0.0
overallTotal = 0.0
subtotal = 0.0

print("Enter the name of 3 items and their respective costs to get the total vaalue of your meal")

ls = [CostCalculator(), CostCalculator(), CostCalculator()]

for entry in ls:
    print "Enter the name of your item:"
    item = raw_input()
    entry.set_item(item)
    print("How much is " + entry.get_name() + "?")
    cost = raw_input()
    entry.set_cost_of_item(cost)

subtotal = sum([x.get_cost_of_item() for x in ls])
totalTip = sum([x.get_tip() for x in ls])
totalTax = sum([x.get_tax() for x in ls])

Javascript

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

此解决方案与@ Arvind相似,但我认为最好使用html标记的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; } 并将attribute设置为onclick s。

&#13;
&#13;
function
&#13;
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;
}
&#13;
&#13;
&#13;