Question

我正在编写代码以切换页面上的单词，以显示和隐藏单词的含义。当HTML和JavaScript放在一个文件中时，它可以正常工作，但是当我尝试将它们放入不同的文件中时，代码不起作用。我将如何解决这个问题？我检查了控制台，没有错误弹出。

JS：

document.getElementById("stream").addEventListener("click", function(){
        var element = document.getElementById("stream_meaning");
        element.classList.toggle("mystyle");
});

document.getElementById("taxi").addEventListener("click", function(){
        var element = document.getElementById("taxi_meaning");
        element.classList.toggle("mystyle");
});

document.getElementById("spend").addEventListener("click", function(){
        var element = document.getElementById("spend_meaning");
        element.classList.toggle("mystyle");
});

document.getElementById("refer").addEventListener("click", function(){
        var element = document.getElementById("refer_meaning");
        element.classList.toggle("mystyle");
});

document.getElementById("offspring").addEventListener("click", function(){
        var element = document.getElementById("offspring_meaning");
        element.classList.toggle("mystyle");
    });

完整HTML（带有链接的脚本）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>dictionary</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
    <title>Dictionary</title>
</head>
<body>
<ul>
    <li id="taxi">
        taxi
        <span id="taxi_meaning" class="meaning">
            a car with a driver who you pay to take you somewhere.
        </span>
    </li>
    <li id="stream">
        stream
        <span id="stream_meaning" class="meaning">
            water that flows naturally along a fixed route formed by a channel cut into rock or ground, usually at ground level.
        </span>
    </li>
    <li id="offspring">
        offspring

        <span id="offspring_meaning" class="meaning">
            In the case of the guinea pig, the number of offspring varies between two and five.
        </span>
    </li>
    <li id="spend">
        spend

        <span id="spend_meaning" class="meaning">
            to give money as a payment for something.
        </span>
    </li>
    <li id="refer">
        refer

        <span id="refer_meaning" class="meaning">
            to tell a reader to look somewhere else in a book for more information about something.
        </span>
    </li>
</ul>
<script type="text/javascript" src="book.js"></script>
</body>
</html>

CSS：

li {
            font-weight: bold;
            font-size: 40px;
            font-family: "Arial Rounded MT Bold" ;

            padding-left: 50px ;
            padding-top: 20px;
            cursor: pointer;
            padding-right: 1px;
};

.meaning{
            display: none;
};

.mystyle{
           display: inline-block;
           padding-left: 100px;
           font-size: 30px;
           font-family: "Arial Black";
           font-weight: normal;
};

Answer 1

确保两个文件都位于同一存储库中。 /路径。尝试将代码粘贴到这些文件中。

请确保从css文件的css类末尾删除;。

这是示例启动器。

index.html

 <!DOCTYPE html>
 <html>

 <head>
 <style>
  .mystyle {
    display: none;
  }
 </style>
 </head>

<body>
<div id="app"> </div>
<li id="refer">Hit Me!</li>
<ul>
    <li>
        <span id="refer_meaning" class="meaning">
            to tell a reader to look somewhere else in a book for more information about something.
        </span>
    </li>
</ul>
</body>
<script src="index.js"></script>
</html>

index.js

// Write Javascript code!
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>Click Me</h1>`;

appDiv.addEventListener('click', () => { appDiv.innerHTML = `<h1>JS starter</h1>` })

document.getElementById("refer").addEventListener("click", function () {
var element = document.getElementById("refer_meaning");
element.classList.toggle("mystyle");
});

如有任何查询，请给我

分为html页面，javascript页面和css页面

1 个答案: