Separating into html page, javascript page, and css pageCreate GUID / UUID in JavaScript?How do JavaScript closures work?What is the most efficient way to deep clone an object in JavaScript?How do I remove a property from a JavaScript object?Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?For-each over an array in JavaScript?
What was the first instance of a "planet eater" in sci-fi?
Prove that the limit exists or does not exist
How does this change to the opportunity attack rule impact combat?
On which topic did Indiana Jones write his doctoral thesis?
What happens if you dump antimatter into a black hole?
Manager is threatening to grade me poorly if I don't complete the project
Pressure inside an infinite ocean?
Randomness of Python's random
Where can I go to avoid planes overhead?
Using column size much larger than necessary
Can you complete the sequence?
Why are prions in animal diets not destroyed by the digestive system?
Why do only some White Walkers shatter into ice chips?
Out of scope work duties and resignation
How long would it take for people to notice a mass disappearance?
How to model the curly cable part of the phone
How was the quadratic formula created?
Would the Disguise Self spell be able to reveal hidden birthmarks/tattoos (of the person they're disguised as) to a character?
BOOM! Perfect Clear for Mr. T
Why is "Vayechulu" said 3 times on Leil Shabbat?
If your medical expenses exceed your income does the IRS pay you?
Missing Piece of Pie - Can you find it?
Has a commercial or military jet bi-plane ever been manufactured?
How can I close a gap between my fence and my neighbor's that's on his side of the property line?
Separating into html page, javascript page, and css page
Create GUID / UUID in JavaScript?How do JavaScript closures work?What is the most efficient way to deep clone an object in JavaScript?How do I remove a property from a JavaScript object?Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?For-each over an array in JavaScript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I'm writing a code to toggle words on a page to show and hide the word's meaning. When the HTML and JavaScript are in one file it works fine but when I try to put them into different files the code does not work. how would I go about fixing this? i have check the console and no errors have popped up.
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");
);
FULL HTML (with script linked):
<!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;
;
javascript addeventlistener
edited Mar 23 at 0:47
muhammad tayyab
299212
asked Mar 22 at 22:00
Jose MateoJose Mateo
113
add a comment |
1
I'm writing a code to toggle words on a page to show and hide the word's meaning. When the HTML and JavaScript are in one file it works fine but when I try to put them into different files the code does not work. how would I go about fixing this? i have check the console and no errors have popped up.
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");
);
FULL HTML (with script linked):
<!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;
;
javascript addeventlistener
edited Mar 23 at 0:47
muhammad tayyab
299212
asked Mar 22 at 22:00
Jose MateoJose Mateo
113
2
You'll have to show the HTML, and how you include the JS file in your page. Also, have you checked in your browser console for any errors? That might give you a clue.
– ADyson
Mar 22 at 22:01
2
Side note; with a little refactoring, this logic could be condensed considerably.
– Taplar
Mar 22 at 22:02
here is the html. sorry for the untidiness. im fairly new at javascript and still trying to get a handle on tings. i appreciate the help.
– Jose Mateo
Mar 22 at 22:09
application/javascriptis wrong. It istext/javascriptIf that doesn't fix it, can you open your site and ctrl+shift+i to open up the console and look for any errors?
– Warp Drive Enterprises
Mar 22 at 22:20
switched application to text but still not working. also console is completely blank with no errors
– Jose Mateo
Mar 22 at 22:26
add a comment |
1
1
1
I'm writing a code to toggle words on a page to show and hide the word's meaning. When the HTML and JavaScript are in one file it works fine but when I try to put them into different files the code does not work. how would I go about fixing this? i have check the console and no errors have popped up.
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");
);
FULL HTML (with script linked):
<!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;
;
javascript addeventlistener
edited Mar 23 at 0:47
muhammad tayyab
299212
asked Mar 22 at 22:00
Jose MateoJose Mateo
113
I'm writing a code to toggle words on a page to show and hide the word's meaning. When the HTML and JavaScript are in one file it works fine but when I try to put them into different files the code does not work. how would I go about fixing this? i have check the console and no errors have popped up.
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");
);
FULL HTML (with script linked):
<!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;
;
javascript addeventlistener
javascript addeventlistener
edited Mar 23 at 0:47
muhammad tayyab
299212
asked Mar 22 at 22:00
Jose MateoJose Mateo
113
edited Mar 23 at 0:47
muhammad tayyab
299212
asked Mar 22 at 22:00
Jose MateoJose Mateo
113
edited Mar 23 at 0:47
muhammad tayyab
299212
edited Mar 23 at 0:47
muhammad tayyab
299212
edited Mar 23 at 0:47
muhammad tayyab
299212
299212
asked Mar 22 at 22:00
Jose MateoJose Mateo
113
asked Mar 22 at 22:00
Jose MateoJose Mateo
113
asked Mar 22 at 22:00
Jose MateoJose Mateo
113
113
2
You'll have to show the HTML, and how you include the JS file in your page. Also, have you checked in your browser console for any errors? That might give you a clue.
– ADyson
Mar 22 at 22:01
2
Side note; with a little refactoring, this logic could be condensed considerably.
– Taplar
Mar 22 at 22:02
here is the html. sorry for the untidiness. im fairly new at javascript and still trying to get a handle on tings. i appreciate the help.
– Jose Mateo
Mar 22 at 22:09
application/javascriptis wrong. It istext/javascriptIf that doesn't fix it, can you open your site and ctrl+shift+i to open up the console and look for any errors?
– Warp Drive Enterprises
Mar 22 at 22:20
switched application to text but still not working. also console is completely blank with no errors
– Jose Mateo
Mar 22 at 22:26
add a comment |
2
You'll have to show the HTML, and how you include the JS file in your page. Also, have you checked in your browser console for any errors? That might give you a clue.
– ADyson
Mar 22 at 22:01
2
Side note; with a little refactoring, this logic could be condensed considerably.
– Taplar
Mar 22 at 22:02
here is the html. sorry for the untidiness. im fairly new at javascript and still trying to get a handle on tings. i appreciate the help.
– Jose Mateo
Mar 22 at 22:09
application/javascriptis wrong. It istext/javascriptIf that doesn't fix it, can you open your site and ctrl+shift+i to open up the console and look for any errors?
– Warp Drive Enterprises
Mar 22 at 22:20
switched application to text but still not working. also console is completely blank with no errors
– Jose Mateo
Mar 22 at 22:26
2
2
You'll have to show the HTML, and how you include the JS file in your page. Also, have you checked in your browser console for any errors? That might give you a clue.
– ADyson
Mar 22 at 22:01
You'll have to show the HTML, and how you include the JS file in your page. Also, have you checked in your browser console for any errors? That might give you a clue.
– ADyson
Mar 22 at 22:01
2
2
Side note; with a little refactoring, this logic could be condensed considerably.
– Taplar
Mar 22 at 22:02
Side note; with a little refactoring, this logic could be condensed considerably.
– Taplar
Mar 22 at 22:02
here is the html. sorry for the untidiness. im fairly new at javascript and still trying to get a handle on tings. i appreciate the help.
– Jose Mateo
Mar 22 at 22:09
here is the html. sorry for the untidiness. im fairly new at javascript and still trying to get a handle on tings. i appreciate the help.
– Jose Mateo
Mar 22 at 22:09
application/javascript is wrong. It is text/javascript If that doesn't fix it, can you open your site and ctrl+shift+i to open up the console and look for any errors?– Warp Drive Enterprises
Mar 22 at 22:20
application/javascript is wrong. It is text/javascript If that doesn't fix it, can you open your site and ctrl+shift+i to open up the console and look for any errors?– Warp Drive Enterprises
Mar 22 at 22:20
switched application to text but still not working. also console is completely blank with no errors
– Jose Mateo
Mar 22 at 22:26
switched application to text but still not working. also console is completely blank with no errors
– Jose Mateo
Mar 22 at 22:26
add a comment |
1 Answer
1
active
oldest
votes
1
Make sure both files are in same repo. / path. Try pasting your code in these files.
Make sure to remove ; at the end of css classes from css files.
here is a sample starter.
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 incase of any query
answered Mar 22 at 22:42
Azeem AslamAzeem Aslam
429311
1
post your full Html file so I will update my answer and find error. BTW I have added a sample js and html file to get started. Just open html file in browser to see output and event listening.
– Azeem Aslam
Mar 22 at 22:45
i have added the full html above.
– Jose Mateo
Mar 22 at 22:52
you can try my code. It seems ur styles are not linked properly Leme check
– Azeem Aslam
Mar 22 at 22:56
sorry but you have to share styles as well :/ for full tesing
– Azeem Aslam
Mar 22 at 22:58
you code is working fine seems like you have path issue make sure to keep all files in on repo and open html file in browser. Or tell me how you are running your code ?
– Azeem Aslam
Mar 22 at 23:02
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55308328%2fseparating-into-html-page-javascript-page-and-css-page%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Make sure both files are in same repo. / path. Try pasting your code in these files.
Make sure to remove ; at the end of css classes from css files.
here is a sample starter.
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 incase of any query
answered Mar 22 at 22:42
Azeem AslamAzeem Aslam
429311
1
post your full Html file so I will update my answer and find error. BTW I have added a sample js and html file to get started. Just open html file in browser to see output and event listening.
– Azeem Aslam
Mar 22 at 22:45
i have added the full html above.
– Jose Mateo
Mar 22 at 22:52
you can try my code. It seems ur styles are not linked properly Leme check
– Azeem Aslam
Mar 22 at 22:56
sorry but you have to share styles as well :/ for full tesing
– Azeem Aslam
Mar 22 at 22:58
you code is working fine seems like you have path issue make sure to keep all files in on repo and open html file in browser. Or tell me how you are running your code ?
– Azeem Aslam
Mar 22 at 23:02
|
show 4 more comments
1
Make sure both files are in same repo. / path. Try pasting your code in these files.
Make sure to remove ; at the end of css classes from css files.
here is a sample starter.
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 incase of any query
answered Mar 22 at 22:42
Azeem AslamAzeem Aslam
429311
1
post your full Html file so I will update my answer and find error. BTW I have added a sample js and html file to get started. Just open html file in browser to see output and event listening.
– Azeem Aslam
Mar 22 at 22:45
i have added the full html above.
– Jose Mateo
Mar 22 at 22:52
you can try my code. It seems ur styles are not linked properly Leme check
– Azeem Aslam
Mar 22 at 22:56
sorry but you have to share styles as well :/ for full tesing
– Azeem Aslam
Mar 22 at 22:58
you code is working fine seems like you have path issue make sure to keep all files in on repo and open html file in browser. Or tell me how you are running your code ?
– Azeem Aslam
Mar 22 at 23:02
|
show 4 more comments
1
1
1
Make sure both files are in same repo. / path. Try pasting your code in these files.
Make sure to remove ; at the end of css classes from css files.
here is a sample starter.
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 incase of any query
answered Mar 22 at 22:42
Azeem AslamAzeem Aslam
429311
Make sure both files are in same repo. / path. Try pasting your code in these files.
Make sure to remove ; at the end of css classes from css files.
here is a sample starter.
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 incase of any query
answered Mar 22 at 22:42
Azeem AslamAzeem Aslam
429311
edited Mar 23 at 0:19
answered Mar 22 at 22:42
Azeem AslamAzeem Aslam
429311
answered Mar 22 at 22:42
Azeem AslamAzeem Aslam
429311
answered Mar 22 at 22:42
Azeem AslamAzeem Aslam
429311
429311
1
post your full Html file so I will update my answer and find error. BTW I have added a sample js and html file to get started. Just open html file in browser to see output and event listening.
– Azeem Aslam
Mar 22 at 22:45
i have added the full html above.
– Jose Mateo
Mar 22 at 22:52
you can try my code. It seems ur styles are not linked properly Leme check
– Azeem Aslam
Mar 22 at 22:56
sorry but you have to share styles as well :/ for full tesing
– Azeem Aslam
Mar 22 at 22:58
you code is working fine seems like you have path issue make sure to keep all files in on repo and open html file in browser. Or tell me how you are running your code ?
– Azeem Aslam
Mar 22 at 23:02
|
show 4 more comments
1
post your full Html file so I will update my answer and find error. BTW I have added a sample js and html file to get started. Just open html file in browser to see output and event listening.
– Azeem Aslam
Mar 22 at 22:45
i have added the full html above.
– Jose Mateo
Mar 22 at 22:52
you can try my code. It seems ur styles are not linked properly Leme check
– Azeem Aslam
Mar 22 at 22:56
sorry but you have to share styles as well :/ for full tesing
– Azeem Aslam
Mar 22 at 22:58
you code is working fine seems like you have path issue make sure to keep all files in on repo and open html file in browser. Or tell me how you are running your code ?
– Azeem Aslam
Mar 22 at 23:02
1
1
post your full Html file so I will update my answer and find error. BTW I have added a sample js and html file to get started. Just open html file in browser to see output and event listening.
– Azeem Aslam
Mar 22 at 22:45
post your full Html file so I will update my answer and find error. BTW I have added a sample js and html file to get started. Just open html file in browser to see output and event listening.
– Azeem Aslam
Mar 22 at 22:45
i have added the full html above.
– Jose Mateo
Mar 22 at 22:52
i have added the full html above.
– Jose Mateo
Mar 22 at 22:52
you can try my code. It seems ur styles are not linked properly Leme check
– Azeem Aslam
Mar 22 at 22:56
you can try my code. It seems ur styles are not linked properly Leme check
– Azeem Aslam
Mar 22 at 22:56
sorry but you have to share styles as well :/ for full tesing
– Azeem Aslam
Mar 22 at 22:58
sorry but you have to share styles as well :/ for full tesing
– Azeem Aslam
Mar 22 at 22:58
you code is working fine seems like you have path issue make sure to keep all files in on repo and open html file in browser. Or tell me how you are running your code ?
– Azeem Aslam
Mar 22 at 23:02
you code is working fine seems like you have path issue make sure to keep all files in on repo and open html file in browser. Or tell me how you are running your code ?
– Azeem Aslam
Mar 22 at 23:02
|
show 4 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55308328%2fseparating-into-html-page-javascript-page-and-css-page%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
You'll have to show the HTML, and how you include the JS file in your page. Also, have you checked in your browser console for any errors? That might give you a clue.
– ADyson
Mar 22 at 22:01
2
Side note; with a little refactoring, this logic could be condensed considerably.
– Taplar
Mar 22 at 22:02
here is the html. sorry for the untidiness. im fairly new at javascript and still trying to get a handle on tings. i appreciate the help.
– Jose Mateo
Mar 22 at 22:09
application/javascriptis wrong. It istext/javascriptIf that doesn't fix it, can you open your site and ctrl+shift+i to open up the console and look for any errors?– Warp Drive Enterprises
Mar 22 at 22:20
switched application to text but still not working. also console is completely blank with no errors
– Jose Mateo
Mar 22 at 22:26