JS Event connected to HTML is not functioning

Question

I have the following fiddle scripts which I implemented in my website

Unfortunately when I have applied them, they do not function for example the "quotes" are not changing as they are in the fiddle.

below is the codes I have used in my website

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/event.js" type="text/javascript"></script>

and the "quotes" script, bit modified by me

<div class="quotes">
<li>Version: 99.62T</li>
<li>Drop: 99%</li>
<li>Exp: 7500x</li>
<li>Status: <font color="green">ONLINE</font></li>
</div>
<div class="quotes">
<li>Accounts: 12,889</li>
<li>Characters: 15,349</li>
<li>Guilds: 345</li>
<li>Online Users: 245</li>
</div>

also Here is the website and you can see how the quotes are acting on it.

Can someone help me out? thanks.

P.S: I am a begginer on this, so can you please dumb it down for me? :)

Why are you using `li` as a child of a `div` ? And it is not 1998, do not use font tag. — epascarello, Mar 28 '20 at 13:18
to keep the "design" of the little circle showing in front of the text — LeLennyZ, Mar 28 '20 at 13:19
Please open the developer tools with F12 and tell us if there are any errors — Guerric P, Mar 28 '20 at 13:21
Use your developer tools! `event.js:30 Uncaught TypeError: Cannot set property 'innerHTML' of null at change (event.js:30)` — epascarello, Mar 28 '20 at 13:21
https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Mar 28 '20 at 13:23
sorry guys, i have no idea what you are talking about, pressed f12 but i dont know how to use this .. — LeLennyZ, Mar 28 '20 at 13:24

score 2 · Answer 1 · answered Mar 28 '20 at 13:24

2

Your script is executing before the div has beed loaded, so put this <script src="./js/event.js" type="text/javascript"></script> after this <div id="changeText"></div> or encapsulate your JavaScript code inside a:

$(document).ready(function() {
  // Your logic
}

answered Mar 28 '20 at 13:24

Guerric P

20,579
2
28
66

its still not working – LeLennyZ Mar 28 '20 at 13:36
Press F12 and tell me what appears in the console tab – Guerric P Mar 28 '20 at 15:00
it's ok now, i have used your code and the guy's code from below and it seems to work now, thanks for your help! – LeLennyZ Mar 28 '20 at 15:09

Berk Öztürk · Answer 2 · 2020-03-28T13:45:07.420

0

You should wrap your function like this to executed when elements are available. And need to add interval to your function call to call it every 2 seconds.

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(1000)
      .fadeOut(2000, showNextQuote);
  }

  setInterval(showNextQuote(),2000);

})();

edited Mar 28 '20 at 13:45

answered Mar 28 '20 at 13:28

Berk Öztürk

204
1
4

`var inst = setInterval(change, 2000);` that is very dirty – Guerric P Mar 28 '20 at 13:33
sorry guys, please ignore the changeText div, as it's a mistake which i forgot to delete from there, the previous answers did not work, any ideas on the code i have provided ? – LeLennyZ Mar 28 '20 at 13:37
Well this code should work its from your code and I tested it on the devtools. What is the problem? – Berk Öztürk Mar 28 '20 at 13:38
this is my event.js $(document).ready (function() { var quotes = $(".quotes"); var quoteIndex = -1; function showNextQuote() { ++quoteIndex; quotes.eq(quoteIndex % quotes.length) .fadeIn(2000) .delay(1000) .fadeOut(2000, showNextQuote); } showNextQuote(); })(); – LeLennyZ Mar 28 '20 at 13:41
I have edited the answer for you and please provide your code content in the question so people can see the code. – Berk Öztürk Mar 28 '20 at 13:45
thanks! used your code and from the other answer above, and seems to be working, appreciate! – LeLennyZ Mar 28 '20 at 15:09

JS Event connected to HTML is not functioning

2 Answers2