Why is my button so tiny?

Question

This is so strange. I have a simple button:

<button id="Day" value="1Day" title="Generate 1 day report" onClick=alert("Hi")>
</button>

I am so surprised to see a tiny element on the screen. Why it appeared like that?

Whats the problem? Demo here

Answer 1

You have no button text! input of type button assigns the text via the value attribute, button does not:

<button id="Day" value="1Day" title="Generate 1 day report" onclick='alert("Hi")'>IM A BUTTON</button>

Demo: http://jsfiddle.net/tymeJV/v9JTQ/4/

Answer 2

As for the specific reason for your button being small, it is because value will not show on a button element, you are thinking of an input element typed as a button. In order for your button to show the text "1Day" it has to be in between the two button tags. A title attribute on an element is what causes the text to appear with a "title" when you hover over the element. This will work for any element.

However, there are some basic issues with this implementation of a button that I think addressing will improve your use of buttons.

Use a type when using <button>

First, the default type of button is submit. This can cause unwanted side affects if your button happens to be inside of a form. Even with an event tied to onclick you are still going to end up submitting the form. As such, all buttons should be properly typed, more than likely with type="button".

Why use button?

Button is rarely seen in large sites. Its primary use stems from using images inside of the two button tags. A more common way to make a button is to use an <input type="button">. Another approach is to use a <div> and create a button feel out of it. I will show some demos for these two later.

Avoid inlining your script

Connecting the onclick event to the element directly is not very desirable. It is better to use the identifier to attach these events. This way if you need to attach the same event to multiple elements it is easy to facilitate and also this way you may reference the script so it can be cached. These identifiers will may also be used to style your elements with css.

Styling Examples

---

Div Demo

A nice approach is to use a div and use your own styling

html

<div id="Day">Generate Day Report</div>

css

#Day{
 border: outset;
 padding: 2px;
 display: inline-block;
 cursor: pointer;
}
#Day:hover{
 border: inset;
}

---

input demo

html

<input id="Day" type="button" value="1Day" title="Generate 1 day report" />

---

Scripting Example

Now, regardless of the use of button, input, or a custom div, you may outsource the script. Following this approach for your scripts will allow your page to have all of the scripting localized in one place. Having it one place allows you to decide to load it as a reference using <script src="urltoscript.js"> and that allows the client to cache it (load it once).

First, target the element.

var theElement = document.getElementById("Day");

next, use the element's native API to attach a click event

theElement.onclick = function(){
 //code here
};

then, fill in the code for your specific needs of when the element is clicked. A note about scope: inside of the "// code here" area, the keyword this will refer to the element clicked.

theElement.onclick = function(){
 alert("Hi");
};

Add this in the script area to any of the demos and click to see it in action

var theElement = document.getElementById("Day");
theElement.onclick = function(){
 alert("Hi");
};

script + input demo

script + div demo