Any ideas of how I can make my previous and next buttons on either side of image?
<p>How can I make my previous and next buttons on either side of image? This is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  &lt;title&gt;change picture&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
    function displayNextImage() {
      x = (x === images.length - 1) ? 0 : x + 1;
      document.getElementById("img").src = images[x];
    }

    function displayPreviousImage() {
      x = (x &lt;= 0) ? images.length - 1 : x - 1;
      document.getElementById("img").src = images[x];
    }

    function startTimer() {
      setInterval(displayNextImage, 5000);
    }

    var images = [],
      x = -1;


&lt;script type="text/javascript"&gt;
&lt;!--
 var imlocation = "images/";
 var currentdate = 0;
 var image_number = 0;
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i &lt;= n; i++) {
     this[i] = ' '
   }
 }
 image = new ImageArray(3)



      
    images[0] = "";
    images[1] = "";
    images[2] = "";
    images[3] = "";
    
 var rand = 60/image.length
 function randomimage() {
    currentdate = new Date()
    image_number = currentdate.getSeconds()
    image_number = Math.floor(image_number/rand)
    return(image[image_number])
 }
 document.write("&lt;img src='" + imlocation + randomimage()+ "'&gt;");
//--&gt;
&lt;/script&gt;
  
  &lt;/script&gt;
&lt;/head&gt;

&lt;body onload="startTimer()"&gt;
  &lt;center&gt;&lt;div id="img-box"&gt;
    &lt;img id="img" src="" /&gt;
    &lt;/div&gt;&lt;/center&gt;
    
    
    &lt;button class="button button400" onclick="displayPreviousImage()"&gt;Previous&lt;/button&gt;

              
       &lt;button class="button button400"onclick="displayNextImage()"&gt;Next&lt;/button&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>