Question

我是javascript初学者，我在后面创建此代码，以在将一个类悬停以影响另一个类时产生悬停效果。

但是我的问题仍然不在这里，我的问题是在调试程序时，我在调试器中看到以下错误消息：

未捕获的ReferenceError：未定义文档

我在stackoverflow上看到了很多与此问题有关的问题，但我不了解遮阳篷，例如，安装JSm有什么用？等等...

所以我希望我对自己理解不傻，并感谢我的支持。

const graphic = document.querySelector('.block1');
const audio = document.querySelector('.block3');
const zoomPro = document.querySelector('.zoom');
const zoomPerso = document.querySelector('.zoom2');

zoomPro.addEventListener('mouseenter', () => {
    graphic.classList.add('hoverGraphic');
    audio.classList.add('unhoverAudio');
})

zoomPerso.addEventListener('mouseenter', () => {
    graphic.classList.add('unhoverGraphic');
    audio.classList.add('hoverAudio');
})

zoomPro.addEventListener('mouseleave', () => {
    graphic.classList.remove('hoverGraphic');
    audio.classList.remove('unhoverAudio');
})

zoomPerso.addEventListener('mouseleave', () => {
    graphic.classList.remove('unhoverGraphic');
    audio.classList.remove('hoverAudio');
})

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf8">
            <link rel="stylesheet" href="StyleM.css">
            <meta http-equiv="X-UA-Compatible" content="ie-edge">
            <link rel="stylesheet" href="Animation.js">
            <Title>Zeryko - Portfolio</Title>
        </head>
<body>

<div class="mainblock">
    <!-- BOITE 1 -->
        <div class = "block1">
            <header>
                <a class = "zoom" href="PartieVisuelle.html">Professionnel</a>
            </header>
        </div>

    <!-- BOITE 3 -->
    <div class = "block3">
        <footer>
            <a class = "zoom2" href="PartieMusicale.html">Personnel</a>
        </footer>
    </div>
</div>

<!-- BOITE 2 -->
    <div class="BigBlock">
        <div class = "block2">
            <div class="Zeryko">Antoine DOUBLET</div>
            <div class="phrase">Developper & Artist</div>
        </div>
    </div>

</body>
</html>

Answer 1

您的JavaScript旨在将事件侦听器添加到HTML文档中。仅将其嵌入HTML文档（使用<script>元素）中运行是有意义的，以便在加载HTML文档时由JS引擎在Web浏览器中执行它。

您的错误消息，以及对JSDOM的提及，强烈建议您尝试使用Node.js运行JS。这没有任何意义。

忘记Node.js。在HTML中添加一个<script>元素，该元素包括一个指向您的JS URL的src属性。使用defer确保页面已完成解析，以便您使用querySelector搜索的HTML元素及时存在。

<script src="....../yourjs.js" defer></script>

未捕获的ReferenceError：未定义文档

1 个答案: