Динамическое создание кнопок в javascript с использованием цикла for и назначение свойств.

Question

Я пытаюсь использовать приведенный ниже код для добавления кнопок в тело моей страницы, появляются кнопки, но ни один из атрибутов не отображается, это кнопка по умолчанию без увеличения размера с размером шрифта, без отображения текста и нет цвет.

function createKeyboard() 
 
\t { 
 
\t var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
 
\t for(var i=0; i<str.length; i++) 
 
\t { 
 
\t  var nextChar = str.charAt(i); 
 
\t  var btn = document.createElement("BUTTON"); 
 
    \t btn.setAttribute("id","btn"+nextChar); 
 
    \t btn.setAttribute("innerHtml",nextChar); 
 
    \t btn.setAttribute("value",nextChar); 
 
    \t btn.setAttribute("text",nextChar); 
 
    \t btn.setAttribute("font-size","14px"); 
 
    \t btn.setAttribute("background-color","#4CAF50"); 
 
    \t document.body.appendChild(btn); 
 
    \t } 
 
    };

При взгляде на кнопки с помощью консоли можно увидеть атрибуты есть, как показано ниже:

<button id="btnA" innerhtml="A" value="A" text="A" font-size="14px"  background-color="#4CAF50"></button>

Не знаете, где я я не понимаю, какие идеи?

-Спасибо

Answer 1

Все не является атрибутом, специально innerHTML.

btn.setAttribute("style","font-size:14px;background-color: #4CAF50"); 
btn.innerHTML = "A" 

Answer 2

1. Атрибуты «размер шрифта» и «цвет фона» должны быть в стиле = «Размер шрифта: 14px; цвет фона: # 4CAF50;»
2. innerHTML убедитесь, что HTML является колпачками
3. Я не уверен, что «текст» является допустимым атрибутом для кнопки

ли что-нибудь исправить? Вы используете довольно много атрибутов, которые, я уверен, недействительны.

EDIT: +1 комментарий Xufox. Вот еще на что:

За то, что вам нужно сделать, вы должны будете иметь представление:

1. HTML атрибуты

   • Наиболее распространенными являются идентификатор, класс, href, src, style < Обычно разработчикам нравится это, когда вы создаете класс и назначаете ему стиль через css. Именно здесь работает ваш код btn.setAttribute("id","btn"+nextChar);. Вот ссылка, которая идет над ними немного больше: http://www.w3schools.com/html/html_attributes.asp

2. HTML DOM узлов (узлы имеют свойства < - что xufox имел в виду.)

   • Когда браузер делает ваш HTML , он регистрирует каждый элемент <div>example element</div> как узел, с которым можно манипулировать. Некоторые общие свойства узла: innerHTML, style, id ... заметить перекрытие? Да, редактирование свойств элемента легко с помощью обработки свойств узла DOM.btn.innerHTML = 'Wow, this is easy!';

Вывод: Попробуйте это, размещать какие-либо дополнительные вопросы

function createKeyboard() 
{ 
    var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
    for(var i=0; i<str.length; i++) 
    { 
    var nextChar = str.charAt(i); 
    var btn = document.createElement("BUTTON"); 
    btn.id = 'btn' + nextChar; 
    btn.innerHTML = nextChar; 
    btn.setAttribute("value", nextChar); 
    btn.setAttribute("text",nextChar); 
    btn.style.fontSize = "14px"; 
    btn.style.backgroundColor = '#4CAF50'; 
    document.body.appendChild(btn); 
    } 
}; 

Даже лучше, чем btn.style редактирует бы добавить класс, который был стилизованную с помощью CSS. Но для этого разговора я закончу его.

Answer 3

Возможно, вы захотите это проверить. Просто сделал это.

// external.js 
 
var doc, bod, htm, C, E, buttonMaker; // reuse on other loads 
 
addEventListener('load', function(){ 
 

 
doc = document; bod = doc.body; htm = doc.documentElement; 
 
C = function(tag){ 
 
    return doc.createElement(tag); 
 
} 
 
E = function(id){ 
 
    return doc.getElementById(id); 
 
} 
 
buttonMaker = function(alphaString, appendTo, clickFunc){ 
 
    var a = alphaString.split(''); 
 
    for(var i=0,b,l=a.length; i<l; i++){ 
 
    b = C('input'); b.type = 'button'; b.value = a[i]; 
 
    b.addEventListener('click', clickFunc); 
 
    appendTo.appendChild(b); 
 
    } 
 
    return appendTo; 
 
} 
 
var test = E('testOut'); 
 
function buttonClickHandler(){ 
 
    test.innerHTML += this.value; 
 
} 
 
buttonMaker('abcdefghijklmnopqrstuvwxyz', E('buttons'), buttonClickHandler); 
 
E('clear').onclick = function(){ // can't reuse without writing over 
 
    test.innerHTML = ''; 
 
} 
 

 
});

/* external.css */ 
 
html,body{ 
 
    padding:0; margin:0; 
 
} 
 
.main{ 
 
    width:980px; margin:0 auto; 
 
} 
 
#buttons>input{ 
 
    font-size:14pt; background-color:#4CAF50; 
 
} 
 
#testOut{ 
 
    height:25px; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <link type='text/css' rel='stylesheet' href='external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
<body> 
 
    <div class='main'> 
 
    <div id='buttons'></div> 
 
    <div id='testOut'></div> 
 
    <input type='button' id='clear' value='clear' /> 
 
    </div> 
 
</body> 
 
</html>