分为html页面、javascript页面和css页面。
分为html页面、javascript页面和css页面。
提问于 2019-03-23 06:00:02
我正在编写一段代码来切换页面上的单词，以显示和隐藏单词的含义。当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;
}; 回答 1
Stack Overflow用户
发布于 2019-03-23 06:42:06
确保两个文件在相同的存储库中。/ path。尝试将代码粘贴到这些文件中。
确保从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");
});Ping me以防有任何查询
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55308328
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号