Separating into html page, javascript page, and css page

Question

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;
};

Answer 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

Separating into html page, javascript page, and css page

Question

1 answers

solution1
1 2019-03-22 22:42:05

Separating into html page, javascript page, and css page

Question

1 answers

solution1 1 2019-03-22 22:42:05

solution1
1 2019-03-22 22:42:05