浏览器 console.log 和代码 console.log 显示不同

Question

我正在创建一个轮播。 我不知道到底发生了什么，在我的 HTML 中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Carousel.css">
    <script src="Carousel.js"></script>
    <title>Carousel</title>
</head>

<body>
    <h1>This is the Carousel</h1>

    <div id="carousel">
        <div class="carousel_item carousel_item--visible"><img src="Images/Sasuke.jpg" alt="" srcset=""></div>
        <div class="carousel_item"><img src="Images/Spider-man.jpg"></div>
        <div class="carousel_item"><img src="Images/The Dark Knight.jpg" ></div>
        <div class="carousel_item"><img src="Images/Arcane.jpg"></div>

        <div class="carousel_actions">
            <button id="carousel_button--prev"> < </button>
            <button id="carousel_button--next"> > </button>
        </div>
    </div>


</body>

</html>

和我的 JS：

let curr_pos = 0;
const slide = document.getElementsByClassName('carousel_item');
console.log(slide.length);

在这个你可以看到我有 4 个项目 with.carousel_item 所以控制台应该显示 4 ，但是它显示0 。但是如果我在浏览器控制台中使用 console.log(slide.length) 那么它显示4 。

现在要么我必须从头开始 Js，要么浏览器已经疯了。 请有人帮忙！

Answer 1

HTML 文档从上到下解析。 当遇到script标签时，所有其他解析都会停止，直到脚本完成执行。

因此，放置在script标签之后的元素在 DOM 中对脚本来说是不可见的。

为了解决这个问题，将script标签的 position 移动到body标签的底部：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Carousel.css">
    <title>Carousel</title>
</head>

<body>
    <h1>This is the Carousel</h1>

    <div id="carousel">
        <div class="carousel_item carousel_item--visible"><img src="Images/Sasuke.jpg" alt="" srcset=""></div>
        <div class="carousel_item"><img src="Images/Spider-man.jpg"></div>
        <div class="carousel_item"><img src="Images/The Dark Knight.jpg" ></div>
        <div class="carousel_item"><img src="Images/Arcane.jpg"></div>

        <div class="carousel_actions">
            <button id="carousel_button--prev"> < </button>
            <button id="carousel_button--next"> > </button>
        </div>
    </div>

    <script src="Carousel.js"></script>
</body>

</html>

浏览器 console.log 和代码 console.log 显示不同

问题描述

1 个解决方案

解决方案1
1 2021-11-20 18:29:06

浏览器 console.log 和代码 console.log 显示不同

问题描述

1 个解决方案

解决方案1 1 2021-11-20 18:29:06

解决方案1
1 2021-11-20 18:29:06