Creating 26 alphabet letter buttons with the for loop and String.fromCharCode()
4306 просмотра
2 ответа
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.
Ответы (2)
1 плюс
Решение
Автор: ostapische
Размещён: 03.06.2015 12:04
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 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>
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>
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- button Как заставить кнопку выглядеть так, как будто она нажата?
- button Нажать кнопку «JavaScript» на кнопке «Ввод» в текстовом поле.
- button YUI Меню расположено позади div
- button Добавление кнопки в ListView в WinForms
- button Javascript Подтвердите всплывающее окно Да, нет кнопки вместо OK и Отмена
- for-loop В чем разница между ++ i и i ++?
- for-loop Можно ли выполнять параллельные обходы в MATLAB так же, как в Python?
- for-loop Haxe итерация на динамическом
- for-loop Переберите все файлы в каталоге, используя цикл for
- for-loop Как мне перебрать диапазон чисел, определенных переменными в Bash?
- alphabet Создание массива букв в алфавите
- alphabet Преобразуйте целое число в его символьный эквивалент, где 0 => a, 1 => b и т. Д.
- alphabet Алфавитный ряд на Python
- alphabet Как мне пройти весь алфавит с помощью Swift при назначении значений?
- alphabet Creating 26 alphabet letter buttons with the for loop and String.fromCharCode()