Question

我遇到了以下两个代码段：

function myFunction() {
  var x = document.getElementById("demo");
  x.style.fontSize = "25px";
  x.style.color = "red";
}

<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>

<h1>My First JavaScript</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button>
<p id="demo"></p>

我无法理解为什么在第二个代码段中添加了不同的type =“button”属性？

两个按钮之间有什么区别？

Answer 1

<button>标记定义了一个可点击的按钮。

在<button>元素中，您可以放置内容，例如文本或图片。这是此元素与使用<input>元素创建的按钮之间的区别。

它有很多属性，type就是其中之一，这个类型有3个值：

button（正常按钮）
reset（处理重置操作，特别是表单）
submit（处理表单提交）

要了解您可以阅读的其他属性： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

https://www.w3schools.com/tags/tag_button.asp

Answer 2

在你的例子中，添加type="button"没有任何区别（删除它，你会看到）。

通常，如果按钮的type用于表单，则会指定type，因为<button>的默认submit为<form>，然后单击它导致提交button，通常是重新加载当前页面或加载新页面。

通过将类型指定为submit而不是默认{{1}}，可以防止此行为。

Answer 3

属性type决定<Button>的样式。它在Internet Explorer中的默认值为button。但是，在其他浏览器中，即使标准submit，它的默认值仍为W3C。因此，您需要始终定义type button。

Answer 4

有三种类型的按钮：

submit - 提交当前表单数据。（这是默认值。）
reset - 重置当前表单中的数据。
按钮 - 只需一个按钮。它的效果必须由其他东西控制（即使用JavaScript）。

Button属性并不是什么大问题，因为它在代码中没有任何变化。两个代码版本的唯一区别是在“onclick”属性（code2）之后编写整个代码，并在“onlick”属性（code1）之后编写函数名称。您可以在此网站上了解按钮属性以及输入和按钮之间的相同属性http://html.com/attributes/button-type/ 我希望它能帮到你很多。

Answer 5

写<button type="button">将按钮定义为可点击按钮。

与<button>没有太大区别，但将type属性放入button元素会更安全，因为某些浏览器可能会对<button>元素使用不同的默认类型，这可能导致错误。

<button> Click Me！</button>和<button type =“button”> Click Me！</button>之间有什么区别？

5 个答案: