My story website project

Projects Personal Projects
1

Hi everyone

I am learning to code and to practice my 30% of skills in javascript, HTML, and CSS, I made a project but it is not working properly. I tried to get help from StackOverflow but have not been able to `find the problem yet.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="story.css">
</head>
<body> 
  
  <img src="kisspng-storytelling-narrative-image-book-portable-network-storyteller-clipart-magic-5cd4d453eedf91.6679978915574518599784.png" alt="image"width="500" height="500">

  <h1>Story World</h1>
  <p>
    Welcome to Story World.<br> 
    Happy Reading 🌞 </p>
    <br><button id ='story'> Lets Find it </button>
    <br> 
    <p id ='full-story'></p>
      <script src = 'story.js'></script>
</body>
</html>

Javascript
let stories = ['Once there was a little girl who loves to dance ',
'It is story of a fan and acc.','This story is about bird ',
'This story is about two friends named Joe and Jenny'
]

let button = document.getElementById('story');
let fullStory = document.getElementById('full-story')
function ready(){
let randomStory = Math.floor(Math.random()*stories.length);
return ready[randomStory]

}
function showStory (){
fullStory.innerHTML = ready();
button.innerHtml = "Next story"
}
 
button.addEventListener = ('click', showStory)
2

Hello! A couple issues:

  • your ready function needs to return stories[randomStory] instead of ready[randomStory] (I would rename the variable randomStory as storyIndex)
  • no = after addEventListener

Then it works. Cheers!

3

thank you so much for your reply. but the application still not working

2022-09-13
2022-09-131366×768 229 KB

i have added a screen shot what is error in developer tools

4

That’s odd, I tried again given the code you posted, and changed only those two things, and it works. Did you change anything else?

Your first error seems to be an issue with the event listener, the last line of code. A good first step in debugging is to check the syntax for event listeners and compare it with yours. It should look like exampleElement.addEventListener('someEvent', myFunction);

The second error looks like there are two places where ‘stories’ has been declared as a variable, such as let stories = blah-blah then later let stories = something-else. If you use the old var variable declaration it doesn’t throw an error in cases like this, but in ES6 JavaScript there are let and const which will throw an error if you declare the same variable twice.

Hope that helps! Cheers

5

thank you a million times. It’s working now, there was some typo. After following your suggestion, its finally working. I am so happy

1 Like