Switching between documents using Javascript?

Question

I'm working on a karaoke video assignment and was hoping to find a way to flip between two different index.html documents (one for chorus, one for verses) using JS. I have limited knowledge of Javascript and am in the process of learning it. So far I think I need to use the following:

 $(document).ready(function () {
     window.setTimeout(function () {
          window.location.href = "index2.html";
     }, 5000);
 });

Right now I have my index1.html and index2.html for the chorus and verses. I'm thinking I'd make an external JS file with the above function which displays index1.html for x amount of seconds and then index2.html for another duration. Sorry if this question is too simple or not well clarified. Still a beginner so any help is appreciated! Thanks!

The best way to do that is to put versus and chorus in the same html, and use javascript to switch the text — A. Ecrubit, May 01 '20 at 14:57
Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — Heretic Monkey, May 01 '20 at 14:57

score 0 · Answer 1 · answered May 01 '20 at 14:57

0

What you are looking for is:

window.location.replace('path/to/index2.html')

I'm not sure what your directory structure looks like but you can pass it a relative or absolute path.

answered May 01 '20 at 14:57

technoY2K

2,442
1
24
38

score 0 · Answer 2 · answered May 01 '20 at 15:04

you don't even need javascript for this purpose, just put this in your head section:

<meta http-equiv="refresh" content="5; url=index2.html">

it will redirect to index2.html after 5 seconds. http-equiv means "http header equivalent". As you can guess it can also be a http header sent by the server so you can serve even pure txt documents and switch them using headers sent by server.

If you want to use the power of javascript, you don't need to switch between pages, you can simply hide one content or another which is pretty simple:

<pre id="verse1">
    verse 1 here
</pre>
<pre id="chorus" style="display: none">
    chorus here
</pre>
<script>
 $(function () {
    window.setTimeout(function () {
      $('#verse1').hide();
      $('#chorus').show();
    }, 5000);
 });
</script>

Switching between documents using Javascript?

2 Answers2