Question

这太奇怪了。我有一个简单的按钮：

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

我很惊讶地看到屏幕上有一个小元素。为什么会这样？

问题是什么？ Demo here

Answer 1

你没有按钮文字！ input类型按钮通过value属性分配文字，button不会：

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

演示：http://jsfiddle.net/tymeJV/v9JTQ/4/

Answer 2

至于你的按钮很小的具体原因，是因为value不会显示在按钮元素上，你会想到输入一个输入元素作为按钮。为了让您的按钮显示文本“1Day”，它必须位于两个按钮标签之间。当您将鼠标悬停在元素上时，元素上的title属性会导致文本显示为“title”。这适用于任何元素。

但是，这个按钮的实现存在一些基本问题，我认为解决这个问题会改善你对按钮的使用。

使用<button>

时使用某种类型

首先，默认的按钮类型是提交。如果您的按钮恰好位于表单内，这可能会导致不必要的副作用。即使事件与onclick相关联，您仍然会最终提交表单。因此，所有按钮都应该正确输入，而不是 type="button" 。

为什么要使用按钮？

在大型网站中很少看到按钮。它的主要用途源于使用两个按钮标签内的图像。制作按钮的更常用方法是使用<input type="button">。另一种方法是使用<div>并创建一个按钮感觉。我稍后会为这两个人展示一些演示。

避免内联脚本

将onclick事件直接连接到元素不是很理想。最好使用标识符来附加这些事件。这样，如果您需要将同一事件附加到多个元素，则很容易实现，这样您就可以引用脚本以便缓存它。这些标识符也可用于使用css为您的元素设置样式。

样式示例

的 Div Demo 的

一个不错的方法是使用div并使用自己的样式

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" />

脚本示例

现在，无论使用按钮，输入还是自定义div，您都可以外包脚本。对您的脚本采用这种方法将允许您的页面将所有脚本集中在一个位置。将它放在一个位置允许您决定使用<script src="urltoscript.js">将其作为引用加载，并允许客户端缓存它（加载一次）。

首先，定位元素。

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

接下来，使用元素的本机API附加点击事件

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

然后，填写代码，以满足您在单击元素时的特定需求。关于范围的说明：在“// code here”区域内，关键字this将引用单击的元素。

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

在脚本区域中将其添加到任何演示中，然后单击以查看其实际操作

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

script + input demo

script + div demo

Answer 3

您没有正确指定标题。请参阅this jsFiddle。

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

编辑：同样修正onClick。

Answer 4

因为title没有按照您的想法行事。尝试：

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

Answer 5

您需要添加文字。请注意，您还应将onClick放在引号内。

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

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

Answer 6

button目前没有任何文字。

指定value不会设置其中的内容。

要查看按钮上的规格，请参阅以下内容：

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

最基本的 button 语法：

<button>

/* ADD SOME TEXT HERE! */

</button>

jsFiddle demo here

Answer 7

因为您没有在按钮上显示任何“文字”。

您将<input>和<button>

混合编码

所以这里是代码：

<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") />

希望这有帮助！

为什么我的按钮太小了？

7 个答案: