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!