我正在编写代码来切换页面上的单词以显示和隐藏单词的含义。当 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;
};
最佳答案
确保两个文件在同一个仓库中。/小路。尝试将您的代码粘贴到这些文件中。
确保从 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");
});
如有任何疑问请联系我
关于javascript - 分为html页面、javascript页面和css页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55308328/