Reputation: 937
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
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
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
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;
}
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");
};
Upvotes: 5
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>
Upvotes: 1
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
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
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>
Upvotes: 2
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