Question

这是javascript的基本问题。

我在做我的个人网页。当人们点击按钮（“botón”）时，此消息应显示为："clicked!"

我的html5：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>omargonzalesdiaz.com</title>
    <link href="website.css" rel="stylesheet"/>
    <script src="script.js"></script>

</head>

这是按钮的特定部分：

<input type="email" placeholder="Your email">
<input type="submit" placeholder="Send">
<button>botón</button>

我的javascript代码:(存储在文件中：“script.js”）

 $("button").on("click", function() {
    alert("clicked!")
  });

但是我点击了没有消息显示（Chrome或Firefox）。

更新1：

显然，我正在关注Jquery教程。我需要在基本的javascript中这样做。我该怎么办。欢迎使用代码示例。

更新2 ：根据建议，我的代码仍无效。

<input type="email" placeholder="Your email">
<input type="submit" placeholder="Send">
<button id="myButton">botón</button>

我的新剧本：

document.getElementById('myButton').addEventListener('click', function(){
      alert('clicked');
    }), false);

Answer 1

＆＃13;

    document.getElementById('myButton').addEventListener('click',function(){
    alert('Clicked!');
});

＆＃13;

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>omargonzalesdiaz.com</title>
</head>
<body>
     <input type="email" placeholder="Your email">
     <input type="submit" placeholder="Send">
     <button id="myButton">botón</button>

</body>
</html>

＆＃13;

确保将脚本放在结束</body>标记前面，如果在脚本加载时没有加载DOM，则无法找到元素：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>omargonzalesdiaz.com</title>
    <link href="website.css" rel="stylesheet"/>
</head>
<body>
     <input type="email" placeholder="Your email">
     <input type="submit" placeholder="Send">
     <button id="myButton">botón</button>
<script src="script.js"></script>
</body>
</html>

的script.js

document.getElementById('myButton').addEventListener('click',function(){
    alert('Clicked!');
});

Answer 2

您应该为您的按钮添加一个ID，然后：

document.querySelector("#mybutton").addEventListener("click",function(){
     alert("BUTTON CLICKED");
});

mybutton是您的按钮ID。尝试使用ID，这样您的DOM查询就不会有多个元素。

示例：

http://jsfiddle.net/fthupjpd/

编辑：不要使用jQuery：）

Answer 3

你的html中没有jquery lib，但你使用的是$，它是jquery的一部分（它是api / lib的外观）

添加：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

在之前

，你可以使用click代码。当你调用事件处理程序时，你还需要确保dom已加载，请尝试：

$(function () { $("button").on("click", function() { alert("clicked!") }); });

如果您不想使用jQuery，请将按钮设为id

<button id="myButton">botón</button>

然后在你的代码中

document.getElementById('myButton').addEventListener('click', function(){ alert('clicked'); }), false);

以下是docs on native event handlers

Answer 4

document.getElementById('myButton').onclick=function(){
    alert('clicked');
};

为了开始使用JavaScript，我发现W3schools非常好：

http://www.w3schools.com/js/default.asp

修改

请参阅Michael的答案，了解在需要脚本访问文档元素时将脚本放在何处。在您可以在JS代码上引用它们之前，需要加载正文。

Answer 5

你有两个问题。

您尚未定义$。看起来您正在尝试使用jQuery library。您需要在脚本之前的页面中包含它。
您正在尝试将事件处理程序绑定到文档中的所有按钮元素，同时解析head部分。此时，没有button个元素。您需要将script元素移至button元素之后（或使用ready或load事件处理者。

如何在html

5 个答案: