gpt4 book ai didi

javascript - html 元素中的事件监听器不起作用

转载 作者:行者123 更新时间:2023-12-03 11:29:36 25 4
gpt4 key购买 nike

我正在尝试将事件监听器添加到 html 元素,但未显示任何所需的输出

我的代码如下:

.html 文件

    <body ng-app="app">
<div class="container" >
<div class="table_set_up_conn">
<div class="set_up_conn">SETTING UP YOUR CONNECTION</div>
</div>
<div class="table_image_anim">
<img id="#image_anim" src="../Images/p1.png"/>
</div>
<div class="grey_layout_anim">
<div class="bold_write"><br>Now let's connect to your Clipsal Hub</div>
<div class="norm_write">1. Go to the Wi-Fi settings on your phone<br><br>2. Connect to the Clipsal Hub network<br><br>3. Return to this app when you're done<br><br></div>
</div>
<div class="table_centre_image">
<img id="#centre_image" src="../Images/p2.png"/>
</div>

</div>
<script src="../Java_Script/button_click.js"></script>
</body>

.js 文件

var image_anim = document.getElementById("#image_anim");
image_anim.addEventListener("webkitAnimationStart", animationListener_start,false);
image_anim.addEventListener("webkitAnimationIteration", animationListener_it,false);
image_anim.addEventListener("webkitAnimationEnd", animationListener_end,false);

function animationListener_start()
{
console.log('animation start');
}
function animationListener_it()
{
console.log('animation iterating');
}
function animationListener_end()
{
console.log('animation end');
}

这里我在“#image_anim”上执行了一个动画,我想附加一个事件处理程序,正如您在我的 js 代码中看到的那样。但是日志中没有显示消息

最佳答案

在 HTML 5 之前,对 ID 的值存在限制,要求其以字母开头(通常无论如何都不会强制执行这些限制,但大多数标记都遵守)。然而,在 HTML 5 中,pretty much all restrictions on IDs已删除:

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Note: There are no other restrictions on what form an ID can take; in particular, IDs can consist of > just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

很可能您正在头部加载脚本文件,而执行时该元素不存在。将脚本元素移动到结束正文标记之前(或文档底部)。如果这不起作用,请告诉我们您正在使用什么浏览器。以下内容在 Safari、Chrome、Firefox 和 Omniweb 中运行良好:

<div id="#foo">#foo</div>

<script>
alert(document.getElementById('#foo').innerHTML);
</script>

关于javascript - html 元素中的事件监听器不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26793272/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com