使用 for 循环在 javascript 中动态创建按钮，并分配属性。

Question

我正在尝试使用下面的代码将按钮添加到我的页面正文中，按钮出现了，但是显示了 none 属性，它是一个默认按钮，没有增加字体大小大小，不显示文本，也没有颜色。

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

使用控制台查看按钮时，我可以看到属性在那里，如下所示：

    <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

属性"font-size"和"background-color"需要符合style="font-size:14px; background-color:#4CAF50;"
innerHTML 确保 HTML 是大写
我不确定 "text" 是否是按钮的有效属性

这能解决什么问题吗？您使用了很多属性，我很确定这些属性无效。

编辑：+1 Xufox 的评论。更多相关信息：

对于你需要做的事情，你需要有一个了解：

HTML属性
- 最常见的是 id、class、href、src、style < 通常开发人员更喜欢创建 class 并通过 css 为其分配样式。这是您的代码 btn.setAttribute("id","btn"+nextChar); 起作用的地方。这里有一个 link 更详细地介绍了它们：http://www.w3schools.com/html/html_attributes.asp
HTML DOM 节点（节点具有属性 <- xufox 所指的内容。）
- 当浏览器呈现您的 HTML 时，它会注册每个元素 <div>example element</div>作为可以操作的节点。一些常见的节点属性是：innerHTML、style、id...注意重叠了吗？是的，使用 DOM 节点属性操作可以轻松编辑元素属性。 btn.innerHTML = 'Wow, this is easy!';

结论：试试这个，post还有问题

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 设置样式的 class。但为了这次谈话的目的，我将就此结束。

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>

使用 for 循环在 javascript 中动态创建按钮，并分配属性。

Dynamically creating buttons in javascript using for loop, and assigning properties.

html

javascript

setattribute

createelement