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

Question

I am trying to use the below code to add buttons into the body of my page, the buttons appear, but none of the attributes display, it is a default button with no increase in size with font size, no text displayed, and no color.

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);
    	}
    };

When looking at the buttons using the console I can see the attributes are there, as shown below:

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

Not sure where I am going wrong here, any ideas?

-Thanks

buttons don't have .innerHTML. You spelled that attribute wrong anyways. JavaScript is case sensitive. — StackSlave
– StackSlave, Commented Feb 2, 2017 at 2:58
@PHPglue sure you aren't thinking of <input>? <button> can certainly have innerHTML — charlietfl
– charlietfl, Commented Feb 2, 2017 at 3:00
Nope, that is incorrect. Try to do some CSS styling on the button children. You won't be able to style things like that on a bunch of Browsers. — StackSlave
– StackSlave, Commented Feb 2, 2017 at 3:09

kawadhiya21 · Accepted Answer · 2017-02-02 02:59:48Z

5

Everything is not an attribute, specially innerHTML.

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

answered Feb 2, 2017 at 2:59

kawadhiya21

2,52823 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

StackSlave Over a year ago

btn.innerHTML is going to be a problem on many a Browser. Use btn.value.

Sebastian Simon Over a year ago

Well, id is a valid attribute. The only one.

kawadhiya21 Over a year ago

If it is a form button, then type, disabled etc. are also HTML based attributes. All attributes are always valid not only id, but doesn't mean they would work in a desired way.

mjr_river Over a year ago

Kawadhiya21, thanks between the input from you and isaacdre I have it figured out. I have only been at this for a couple of weeks, a lot of trial and error on my part. Thanks Everyone!

isaacdre · Accepted Answer · 2017-02-02 18:16:07Z

4

The attributes "font-size" and "background-color" need to be in style="font-size:14px; background-color:#4CAF50;"
innerHTML make sure the HTML is caps
I'm not sure that "text" is a valid attribute for button

Did that fix anything? You're using quite a bunch of attributes that I'm pretty sure aren't valid.

EDIT: +1 Xufox's comment. Here is more on that:

For what you need to do, you'll need to have an understanding:

HTML attributes
- Most common are id, class, href, src, style < Usually fellow developers like it better when you create a class and assign style to it via css. This is where your code btn.setAttribute("id","btn"+nextChar); works. Here is a link that goes over them a bit more: http://www.w3schools.com/html/html_attributes.asp
HTML DOM nodes (nodes have properties <- what xufox was referring to.)
- When the browser renders your HTML, it registers each element <div>example element</div> as a node that can be manipulated. Some common node properties are: innerHTML, style, id... notice the overlap? Yep, Editing element properties is easy with DOM node property manipulation. btn.innerHTML = 'Wow, this is easy!';

Conclusion: Try this, post any further questions

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);
    }
};

Even better than btn.style edits would be to add a class that was styled using css. But for the purpose of this conversation, I'll end it there.

edited Feb 2, 2017 at 18:16

answered Feb 2, 2017 at 3:02

isaacdre

9027 silver badges10 bronze badges

3 Comments

Sebastian Simon Over a year ago

innerHTML is a property, not an attribute. And it still needs to be set.

isaacdre Over a year ago

Agreed. Quite a bunch of invalid attributes.

mjr_river Over a year ago

Yes background color worked, not sure on font size as I am still trying to figure out how to get the nextChar variable to work with the format you specified. It is progress, thanks!

StackSlave · Accepted Answer · 2017-02-02 04:03:06Z

You might want to check this out. Just made it.

// 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>

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related