Initializing a Button Element in a DIV

Question

I know this is not standard operating procedure. However, for my own convenience I would like to understand how to manipulate HTML button elements using javascripts. In particular I am having difficulty replicating the ellipsis portion of the following statement:

<button type="button">...</button>

What I mean is this: I have added a button to a div using scripts, but I cannot get a label onto the button itself. This is the code I have used so far:

var body,
 adc = adc || {}; 

adc.containers = {
 bdrStyleOps: ['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'],
 bdrWidthOps: ['thin', 'medium', 'thick', '10px', '15px', '25px'],
 addHead: function() {
  var mainHead = this.addDiv('Main Header', 40, 0, -1, 45, 600, this.bdrStyleOps[3], this.bdrWidthOps[1], 'green', 10);
  var btn = document.createElement('button');
  btn.setAttribute('name', 'head button 1');
  btn.setAttribute('height', '30px');
  btn.setAttribute('width', '30px');
  btn.setAttribute('type', 'button');
  btn.setAttribute('value', 'HELLO BUTTON');
  mainHead.appendChild(btn);
  body.appendChild(mainHead);
 },
      
 addDiv: function(ID, x, y, z, h, w, bStyle, bWidth, bColor, bRadius) {
  var obj = document.createElement('div');
  obj.id = ID;
  obj.style.position = 'absolute';
  obj.style.top = y + 'px';
  obj.style.left = x + 'px';
  obj.style.height = h + 'px';
  obj.style.width = w + 'px';
  obj.style.zIndex = z;
  obj.style.borderStyle = bStyle;
  obj.style.borderWidth = bWidth;
  obj.style.borderColor = bColor;
  obj.style.borderRadius = bRadius + 'px';
  obj.style.textAlign = 'left';
  obj.style.verticalAlign = 'middle';
  obj.style.padding = '0px 0px 0px 0px';
  obj.style.whiteSpace = 'pre-wrap';
  
  return obj;
 },
 
  init: function() {
  body = document.getElementById('body');
  this.addHead();
 }
}

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body id="body">
  <script src="globals.js">
  </script>
  <script src="content.js">
  </script>
  <script src="CSS.js">
  </script>
  <script>
   document.addEventListener('DOMContentLoaded', function () {
    adc.containers.init();
   });
  </script>
 </body>
</html>

This code generates a div with a green border and a button in the top left corner. The trouble is, the button has no size. In the Chrome developer view, inspecting that button shows that the height and width are set to 30px, yet the button is still tiny.

Secondly, I have not found a way to set the text value of the button. The 'value' property does not accomplish this, and I have only found references to the html initialization which puts the text between the tags:

<button type="button">LABEL TEXT</button>

I would like to know how to: 1) set LABEL TEXT using java and 2) Why my button has no size.

I appreciate any help you can offer!

http://stackoverflow.com/questions/16303954/setting-button-text-via-javascript — JonnyAggro, Sep 18 '14 at 03:24

score 1 · Accepted Answer · answered Sep 18 '14 at 03:34

1

For the text you need to use innerHTML or textContent:

btn.textContent = 'LABEL TEXT';

As for the size, height and width are properties of the style property. You can set them with:

btn.setAttribute('style','height:30px; width:30px');

or

btn.style.height = '30px';
btn.style.width = '30px';

answered Sep 18 '14 at 03:34

user3035542

148
1
6

That is exactly the answer and examples I was hoping for. Sorry for such a simple question. I couldn't find a specific reference to javascript initialization and unfortunately, I don't know enough to make the right jumps from one syntax example to another. Thank you! – daDib Sep 18 '14 at 03:54

Initializing a Button Element in a DIV

1 Answers1