I am making a website, and have made JavaScript code to scroll an element into view, and the more times I press the button, the higher the ID of the element that gets scrolled into view should be. It works correctly on Edge and Firefox, but in Chrome, it is only working the first time, and after that it refuses to scroll, even though the ID of the element is increasing. I would be grateful if somebody could help me with this issue.

我正在制作一个网站，并制作了将元素滚动到视图中的JavaScript代码，我按下按钮的次数越多，滚动到视图中的元素的ID应该越高。它在Edge和Firefox上运行正常，但在Chrome上，它只在第一次运行，之后就拒绝滚动，即使元素的ID在增加。如果有人能帮我解决这个问题，我将不胜感激。

This is the JS code:

这是JS代码：

document.addEventListener("DOMContentLoaded", function () {
    const scroll_button = document.getElementById("scroll_button");
    var scrollnum = 4

    function scrollFunction() {
        console.log(scrollnum)
        const product = document.getElementById(scrollnum);
        // Scroll the element into view, with smooth behavior
        product.scrollIntoView({
            behavior: "smooth",
            block: "start"
        });
        scrollnum += 2
    }
    if (scroll_button) {
        scroll_button.addEventListener("click", scrollFunction);
    }
})

This is part of the HTML code:

这是HTML代码的一部分：

<div class="col product_row">
<!-- <div class="product_row"> -->
<div class="col-md-4 mb-2" id="1">
    <div class="card">
        <img src="./admin_area/product_images/apple.webp" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Apple</h5>
            <p class="card-text">tasty</p>
            <a href="index.php?add_to_cart=4" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=4" class="btn btn-secondary">View more</a>
            // <a href="#4" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<div class="col-md-4 mb-2" id="2">
    <div class="card">
        <img src="./admin_area/product_images/AZZAM yacht.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">AZZAM</h5>
            <p class="card-text">big yacht</p>
            <a href="index.php?add_to_cart=5" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=5" class="btn btn-secondary">View more</a>
            // <a href="#5" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<div class="col-md-4 mb-2" id="3">
    <div class="card">
        <img src="./admin_area/product_images/Bugatti La Voiture Noire.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Bugatti La Voiture Noire</h5>
            <p class="card-text">nice car</p>
            <a href="index.php?add_to_cart=2" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=2" class="btn btn-secondary">View more</a>
            // <a href="#6" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<button id="scroll_button">Scroll</button>

I put console.log(scrollnum) in my code to see if scrollnum was updating. It was indeed updating in all web browsers I tested. I tried putting a setTimeout() function in place so that it waits before scrolling, but that had no effect and actually did not even work.

我在代码中放入sole.log(Scllnum)，以查看scllnum是否在更新。在我测试的所有网络浏览器中，它确实都在更新。我尝试将setTimeout()函数放在适当的位置，以便它在滚动之前等待，但这没有任何效果，实际上甚至不起作用。

Just to let you know, neither IDs or classes should begin with a number.

只想让您知道，ID或类都不应该以数字开头。

Anyway, try logging product instead of scrollnum to make sure the element you're trying to scroll to is actually updating.

无论如何，尝试记录产品而不是Scrollnum，以确保您试图滚动到的元素确实在更新。