Question

因此，我试图在单击元素时将消息记录到控制台。它会短暂显示该消息，然后清除控制台。为什么这样做呢？我意识到我必须在页面上向下移动脚本，因为否则该变量将为null。

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Learning</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

</head>

<body>
    <div class="wrapper">
        <div>
            <a href="">
                <section id="headSlot">
                </section>
            </a>

            <a href="">
                <section id="neckSlot">
                </section>
            </a>
        </div>

        <div>
            <a href="">
                <section id="headSlot">
                </section>
            </a>

            <a href="">
                <section id="neckSlot">
                </section>
            </a>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>

</html>

JS

var headSlot = document.getElementById("headSlot");
headSlot.addEventListener("click", printToConsole);


function printToConsole() {
    console.log("Hello World!");
}

Answer 1

这是因为您的锚标记。它们导致您的页面刷新。将锚标记更改为以下内容以禁用页面刷新：

<a href="#"></a>

或者您可以停止事件传播（在此处了解更多信息：https://medium.freecodecamp.org/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e）。

function printToConsole(e) {
    e.preventDefault()
    console.log("Hello World!");
}

Answer 2

您也可以使用<a href="javascript:void(0);"></a>。

为什么我的脚本快速登录到控制台然后清除？

2 个答案: