CODEWITHSUNDEEP
htmlcss
Anusha Honey
Anusha Honey

Reputation: 937

Why is my button so tiny?

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

Upvotes: 6

Views: 5638

Answers (7)

tymeJV
tymeJV

Reputation: 104805

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/

Upvotes: 23

Travis J
Travis J

Reputation: 82357

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

Upvotes: 5

Josh Crozier
Josh Crozier

Reputation: 241278

There is currently no text in the button.

Specifying a value does not set the contents inside it.

To see the specs on a button, see the following:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Most basic button syntax:

<button>

/* ADD SOME TEXT HERE! */

</button>

jsFiddle demo here

Upvotes: 1

UID
UID

Reputation: 4494

Because you have not given any "Text" to show on button.

You code mix both <input> and <button>

So here goes the code:

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

OR

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

Hope this help!

Upvotes: 1

chopper
chopper

Reputation: 6709

You didn't specify the title correctly. See this jsFiddle.

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

EDIT: Also fixed onClick.

Upvotes: 3

Cody
Cody

Reputation: 8964

You need to add the text. Please note you should also put the onClick inside of quotes.

<button id="Day" value="1Day" title="Generate 1 day report" onClick="alert('Hi')">You need text.</button>

http://jsfiddle.net/v9JTQ/7/

Upvotes: 2

i_am_jorf
i_am_jorf

Reputation: 54640

Because title doesn't do what you think it does. Try:

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

Upvotes: 2

Related Questions