Javascript getElementById上的给定错误_Javascript

Javascript getElementById上的给定错误

javascript

Javascript getElementById上的给定错误,javascript,Javascript,我必须执行两个图像切换的动画。图像ID为image\u anim 它不是getElementsById它的getElementById，删除s这是你犯的一个简单错误，你写了getElementsById，但是你必须删除s，所以正确的单词是：getElementById，首先，它是没有s的getElementById 第二，JS代码必须在结束标记之前，因为当它现在运行时，元素还不存在第三，您的id=image\u anim不是有效的id。您需要id=image\u anim。哈希在CSS中用于访

我必须执行两个图像切换的动画。图像ID为image\u anim

它不是getElementsById它的getElementById，删除s这是你犯的一个简单错误，你写了getElementsById，但是你必须删除s，所以正确的单词是：getElementById，首先，它是没有s的getElementById

第二，JS代码必须在结束标记之前，因为当它现在运行时，元素还不存在

第三，您的id=image\u anim不是有效的id。您需要id=image\u anim。哈希在CSS中用于访问ID，因此它不能与ID名称分开。

您的代码缺少3个方面：

在访问元素或将JS放在要访问的元素之后之前，需要等待加载DOM：

// https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
window.addEventListener('DOMContentLoaded', callback);

它是getElementById而不是getElementsById：

当给html元素一个ID时，不要使用哈希符号：

<img id="image_anim" src="../Images/p1.png"/>

将其全部打包：

<script>
window.addEventListener('DOMContentLoaded', function() {
    var myImg = document.getElementById('image_anim');

    //.. other code here
});
</script>
<img id="image_anim" src="../Images/p1.png"/>

您在for循环中使用了setTimeout，它永远不会给您预期的结果。请改用setInterval： getElementsById中也存在语法错误

getElementsById在javascript中什么都不是。其getElementById，请删除

getElementsById其GetElementById不存在getElementsByIdmethod@Pallavi我投票决定结束这个问题，因为在您修复自己的代码之后，它与任何人都不再相关。您自己是如何发现这些错误的？在浏览器中，打开。通常它会向您显示一个详细的错误，包括出错的行。thanx但有一个问题现在代码正在运行，但仍然没有在两个源之间切换4次。它只是从p1更改为P2一次。

document.getElementById('myId');

<img id="image_anim" src="../Images/p1.png"/>

<script>
window.addEventListener('DOMContentLoaded', function() {
    var myImg = document.getElementById('image_anim');

    //.. other code here
});
</script>
<img id="image_anim" src="../Images/p1.png"/>

   <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head >
        <title >My Chill</title >
        <link rel="stylesheet" type="text/css" href="../css/Start_Page_css.css" />
        <script src="../Java_Script/button_click.js" ></script >
        <script type="text/javascript" >
            document.addEventListener('DOMContentLoaded', function () {
                var boxOne = document.getElementById("image_anim");
                var img = 1;
                var maxLoop = 4;
                var loopCount = 0;
                var interval = setInterval(function () {
                    ++loopCount;
                    if (loopCount <= maxLoop) {
                        ++img;
                        img = img > 2 ? 1 : img;
                        boxOne.src = "../Images/p" + (img) + ".png";
                    } else {
                        clearInterval(interval);
                    }
                }, 3000);
            }, false);
        </script >
    </head >
    <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 >
    </body >
    </html >