[英]HTML and JavaScript - How do you add a click event to a div
I've been following examples but my fiddle isn't working. 我一直在跟踪示例,但我的小提琴无法正常工作。 Here is the code:
这是代码:
var showMessage; var divTag = document.getElementById("myDiv"); divTag.onClick = showMessage(); showMessage = function() { alert("You clicked me."); }
<div id="myDiv" style="height: 100px; width: 100px; background-color: pink;"> </div>
I'm probably missing something stupid but I cannot see it. 我可能缺少一些愚蠢的东西,但我看不到它。 I read out here that it is possible to put a click event on a div.
我在这里读出,可以在div上放置click事件。 Anybody know what I am doing wrong?
有人知道我在做什么错吗?
PS Yeah, I don't know how to decipher or fix the error. PS:是的,我不知道如何解密或修复错误。
Change your JS to this: 将您的JS更改为此:
function showMessage() {
alert("You clicked me.");
}
var divTag = document.getElementById("myDiv");
divTag.addEventListener('click', showMessage);
Your code: divTag.onClick = showMessage();
您的代码:
divTag.onClick = showMessage();
was calling the response of the function showMessage
instead of the function. 正在调用函数
showMessage
而不是函数的响应。
showMessage
was called and its return value ( undefined
) is what you passed to the onClick
property. showMessage
被调用,并且其返回值( undefined
)是您传递给onClick
属性的内容。
Minor issue: If you want this page to be used by Blind users that use a screen reader it would be better to use a
<button>
or an<a>
tag.次要问题:如果要让使用屏幕阅读器的盲人用户使用此页面,最好使用
<button>
或<a>
标记。 Either that or you need to emulate all of the things needed to get the screen readers to work correctly.要么,要么您需要模拟使屏幕阅读器正常工作所需的所有东西。
You had several problems: 您遇到了几个问题:
onClick
is not the same thing as onclick
. onClick
与onclick
是不同的东西。 Here is the corrected version of your code: 这是您的代码的更正版本:
showMessage = function() { alert("You clicked me."); } var divTag = document.getElementById("myDiv"); divTag.onclick = showMessage;
<div id="myDiv" style="height: 100px; width: 100px; background-color: pink;"></div>
That's vanilla JS. 那是香草JS。 Since the question is also tagged "jQuery", here's the jQuery version of the same thing:
由于该问题也被标记为“ jQuery”,因此这是同一件事的jQuery版本:
$('#myDiv').on("click",function() {alert("you clicked me")});
Since you've tagged jQuery I'll just give you the jQuery solution: 既然您已经标记了jQuery,我就给您jQuery解决方案:
$('#myDiv').click(showMessage);
But make sure you set the showMessage
function before (above) that jQuery click event binding. 但是,请确保在jQuery click事件绑定之前(上方)设置
showMessage
函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.