CODEWITHSUNDEEP
javascripthtmlcss
JudasMoses
JudasMoses

Reputation: 398

What is wrong with this code? Switching images with pure javascript

I've been trying to switch between images on a timer with javascript on a website however it seems to break as soon as I bring it on to the website with pure javascript but on JSFiddle it seems to work fine. Here is the broken code on the website. 

document.addEventListener("DOMContentLoaded", function() {

  var timer;
  var sec = 1;
  var timeField = document.getElementById("time");
  var photo = document.getElementById("html_photo");
  timeField.innerHTML = "1";
  var photo_current = ["http://www.drodd.com/images15/1-15.jpg","http://www.drodd.com/images15/2-23.jpg","http://www.drodd.com/images15/3-12.jpg"];

  function update() {
    sec++;
    timeField.innerHTML = sec;

    if (sec == 30) sec = 0;
    
  }

  function changeImage() {
    if (sec == 1) {
      photo.src = photo_current[0];
    } else if (sec == 3) {
      photo.src = photo_current[1];
    } else if (sec == 5) {
      photo.src = photo_current[2];
    }
  }

  function start() {
    timer = setInterval(function() {
      update()
      changeImage()
    }, 1000);
  }

  start();
	
});
body {
  background-color: #999999;
  overflow-x: hidden;
}


    @font-face {
      font-family: HelveticaNeue;
      src: url(fonts/HelveticaNeue.ttf) format("truetype");
    }

    @font-face {
      font-family: HelveticaNeue_Light;
      src: url(fonts/HelveticaNeue_Light.ttf) format("truetype");
    }

    @font-face {
      font-family: HelveticaNeue;
      src: url(fonts/HelveticaNeue.ttf) format("truetype");
    }        

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

.navigation-bar {
  position: static;
  width: 100vw;
  z-index: 1;
}

#navbar {
  float: right;
}

#navbar li a {
  float: right;
}

p {
  color: #f2f2f2;
}

#navbar a {
    font-family: HelveticaNeue;
    font-size: 72px;
    padding: 70px 100px; 
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-family: "Helvetica Neue";
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    outline-offset: -7px
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

li a:hover {
    background-color: #111;
    color: 
}

li a:active {
  background-color: #f9eb59;
  color: #303030;
  
}

#homepage-photo {
  width:100%;
  height:83.5%;

}

#fit-page {
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

#test {
  display: block;
  background-color: green;
}

#logo-nav {
  height: 100%;
  width: 50%;
}
<!DOCTYPE html>
<html>
<head>

<title>TUMBLEWEED</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo_icon_transparent.ico" />
<link rel="stylesheet" type="text/css" href="code/css/style.css">
<link rel="stylesheet" type="text/css" href="code/css/homepage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/js.js"></script>

<style>

<div class="" style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%;'>

</style>
</head>
<body>
<div id="fit-page">
<ul>
  <li><a id="active" href="">
    <img src="images/logo_transparent.png"  style="height: 100%; width: 50%;">
  </a>
  </li>
  <li id="navbar" style="float: right;"><a href="code/Popular.html">Popular</a></li>
  <li id="navbar" style="float: right;"><a href="/Budget.html">Budget</a></li>
  <li id="navbar" style="float: right;"><a href="/Unique.html">Unique</a></li>  
</ul>
<!--
<div class="image-parent">
	<img src="http://www.drodd.com/images15/1-22.png" id="one" style="z-index: 3">
	<figure style="background-image: http://www.drodd.com/images15/3-12.jpg; width: 100%; height: 100%; color: white; background-color: white; z-index: 1"></figure>
	<img src="http://www.drodd.com/images15/2-23.jpg" id="two" style="z-index: 2">
</div>
-->
<img src="images/Homepage/Apple.jpg" id="html_photo" alt='[]' />

</div>





</body>
</html>

This is the a native website so obviously the native links will not work so please ignore them.

I need an answer in pure javascript so please do not post jQuery answers.

Thanks

Upvotes: 0

Views: 583

Answers (1)

Nirav Joshi
Nirav Joshi

Reputation: 2950

You forget to add <div id="time"></div> in your code. Check this it may help you.

document.addEventListener("DOMContentLoaded", function() {

  var timer;
  var sec = 1;
  var timeField = document.getElementById("time");
  var photo = document.getElementById("html_photo");
  timeField.innerHTML = "1";
  var photo_current = ["http://www.drodd.com/images15/1-15.jpg","http://www.drodd.com/images15/2-23.jpg","http://www.drodd.com/images15/3-12.jpg"];

  function update() {
    sec++;
    timeField.innerHTML = sec;

    if (sec == 30) sec = 0;
    
  }

  function changeImage() {
    if (sec == 1) {
      photo.src = photo_current[0];
    } else if (sec == 3) {
      photo.src = photo_current[1];
    } else if (sec == 5) {
      photo.src = photo_current[2];
    }
  }

  function start() {
    timer = setInterval(function() {
      update()
      changeImage()
    }, 1000);
  }

  start();
	
});
body {
  background-color: #999999;
  overflow-x: hidden;
}


    @font-face {
      font-family: HelveticaNeue;
      src: url(fonts/HelveticaNeue.ttf) format("truetype");
    }

    @font-face {
      font-family: HelveticaNeue_Light;
      src: url(fonts/HelveticaNeue_Light.ttf) format("truetype");
    }

    @font-face {
      font-family: HelveticaNeue;
      src: url(fonts/HelveticaNeue.ttf) format("truetype");
    }        

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

.navigation-bar {
  position: static;
  width: 100vw;
  z-index: 1;
}

#navbar {
  float: right;
}

#navbar li a {
  float: right;
}

p {
  color: #f2f2f2;
}

#navbar a {
    font-family: HelveticaNeue;
    font-size: 72px;
    padding: 70px 100px; 
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-family: "Helvetica Neue";
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    outline-offset: -7px
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

li a:hover {
    background-color: #111;
    color: 
}

li a:active {
  background-color: #f9eb59;
  color: #303030;
  
}

#homepage-photo {
  width:100%;
  height:83.5%;

}

#fit-page {
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

#test {
  display: block;
  background-color: green;
}

#logo-nav {
  height: 100%;
  width: 50%;
}
<!DOCTYPE html>
<html>
<head>

<title>TUMBLEWEED</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo_icon_transparent.ico" />
<link rel="stylesheet" type="text/css" href="code/css/style.css">
<link rel="stylesheet" type="text/css" href="code/css/homepage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/js.js"></script>

<style>

<div class="" style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%;'>

</style>
</head>
<body>
<div id="fit-page">
<ul>
  <li><a id="active" href="">
    <img src="images/logo_transparent.png"  style="height: 100%; width: 50%;">
  </a>
  </li>
  <li id="navbar" style="float: right;"><a href="code/Popular.html">Popular</a></li>
  <li id="navbar" style="float: right;"><a href="/Budget.html">Budget</a></li>
  <li id="navbar" style="float: right;"><a href="/Unique.html">Unique</a></li>  
</ul>

<div id="time"></div>
<!--
<div class="image-parent">
	<img src="http://www.drodd.com/images15/1-22.png" id="one" style="z-index: 3">
	<figure style="background-image: http://www.drodd.com/images15/3-12.jpg; width: 100%; height: 100%; color: white; background-color: white; z-index: 1"></figure>
	<img src="http://www.drodd.com/images15/2-23.jpg" id="two" style="z-index: 2">
</div>
-->
<img src="images/Homepage/Apple.jpg" id="html_photo" alt='[]' />

</div>





</body>
</html>

Upvotes: 1

Related Questions