Why doesn't my JS show/hide div script work?

JavaScript
1

The following script is based on this fiddle: http://jsfiddle.net/zEG4g/1574/

The idea is that div id one is supposed to show by default on page load, then at a certain time, div id two will replace it (with the href pointing to a page in another folder) on page load. Divs three and four are to show no matter what.

Unfortunately, the page starts blank! What am I doing wrong implementing this solution? I’m assuming the jsfiddle does not use Jquery.

<body onload="window.setInterval">	
	<div id="wrapper">
		<div id="three" style="display:none">
			<p id="spacer">&nbsp;</p>
				<a href="2017/three/index.html">
					<img class="change" id="okay" src="images/logo_three.png" alt="three">
				</a>
		</div>

		<div id="one" style="display:none">		
			<a href="2016/one/index.html">
					<img class="change" id="maybe" src="images/logo_one.png" alt="one">
				</a>
		</div>

		<div id="two" style="display:none">		
			<a href="2017/one/index.html">
					<img class="change" id="summat" src="images/logo_one.png" alt="one" >
				</a>
		</div>

		<div id="four" style="display:none">
			<a href="2016/four/index.html">
					<img class="change" id="dunno" src="images/logo_four.png" alt="four">
				</a>
		</div>
	</div>
	
<script>
window.setInterval(function(){
  var current = new Date();
  var expiry  = new Date("February 13, 2017 13:00:00")
  var expiry2 = new Date("February 13, 2017 15:00:00")

  if(current.getTime()>expiry.getTime()){
    $('#one').show();
    $('#two').hide();
    $('#three').show();
    $('#four').show();
  }
  else if(current.getTime()>expiry2.getTime()){
    $('#one').hide();
    $('#two').show();
    $('#three').show();
    $('#four').show();
   }
}, 0);
$('#one').show(); 
</script>
2

I’m assuming the jsfiddle does not use Jquery.

The jsFiddle does use jQuery. If you’re not including that in your page, then that is the problem.

If it’s not…

<body onload="window.setInterval">

You need to call a function here or just let the script be executed at the end of the body load. I haven’t looked at your code myself, but I bet this is throwing an error and causing your page to blow up. Even if you solve this problem by adding jQuery, you need to remove this.

3

I’m not using Jquery on the page, so that’s the problem! I’ll try to convert this to pure JS.

1 Like
4

This does the trick:

<script>
// I got the switchover time from http://currentmillis.com/
 
function setTime(){
 
  var current = new Date();
  var now = current.getTime();
 
  if(now < 1487610000000){
  document.getElementById('one').style.display='block';
  document.getElementById('two').style.display='none';
  document.getElementById('three').style.display='block';
  document.getElementById('four').style.display='block';
  }
  
  else if(now > 1487610000000){
  document.getElementById('two').style.display='block';
  document.getElementById('one').style.display='none';
  document.getElementById('three').style.display='block';
  document.getElementById('four').style.display='block';
   }
}
</script>
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.