CSS按钮调用JavaScript函数

Question

我用CSS创建了一个按钮，如下所示：

<div class="button">Click me!</div>

现在我不知道如何在单击此按钮时执��� JavaScript 函数？！就像 HTML 按钮的 onClick 一样，在这里不起作用。

请您帮助我好吗？谢谢！

编辑：基本上是这样：

HTML

<span class="button" onClick="farmArbeiter()" style="margin-left: 25%;">Kaufe Arbeiter</span>

无论是onClick还是onclick都不起作用。 这段JavaScript代码

function farmArbeiter() { alert("it works");}

- ColdStormy

---

最简单的方法是切换到<button>标签。 - Simon H

我知道，但这些按钮看起来很丑，不适合我的网站。 - ColdStormy

使用<button>标签创建一些按钮，然后给这些按钮添加类。现在可以使用onclick方法。 - Cracker

使用Bootstrap进行样式设计？ - Simon H

Answer 1

使用JavaScript将单击事件处理程序附加到它：

document.getElementById("BT1").addEventListener("click", function(){
    alert("oh snap, i was clicked...");
});

<div class="button" id="BT1">Click me!</div>

- Banana

---

奇怪，片段代码可以工作，但是当我将你的代码复制到我的页面上时，它就不能工作了？ - ColdStormy

你需要将这部分内容包装在dom加载后运行的块中，在页面加载较慢且脚本执行时，由于按钮无法被javascript找到。虽然代码片段加载快，但你的页面加载速度较慢。 - Banana

天啊，我终于找到错误了。我的外部 JavaScript 文件没有正确链接。现在它可以工作了。谢谢你的帮助！ :D - ColdStormy

Answer 2

有几种使用jQuery的方法...

$(document).on('click','.button',function(e){ //your code  });


$('.button').on('click',function(e){ //your code  });


$('.button')[0].onclick = MyFunction;

function Myfunction()
{
  //your code...
} 

使用JavaScript，您可以：

document.getElementsByClassName('button')[0].onclick = function(event){ 
  //your code 
 }

- A.T.

Answer 3

请尝试这个

。

您可以使用 jQuery。

$('.button').click(function(){ -- code --});

- Muhammed Shuhaib