Call functions instead of reloading page

Question

Basically I have this function that picks two different random images from a folder. At the moment I'm using onClick="window.location.reload() to run the function everytime you click.

Is there anyway I can call the funcion onClick without refreshing the page?

Thanks in advance.

body {
  border: 0;
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font: 2.1vw/1.2em HelveticaNeue, Arial, sans-serif;
  letter-spacing: .02em
}

.logo {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  text-align: center;
  z-index: 100
}

#one,
#two {
  position: fixed;
  width: 50vw;
  top: 0;
  display: table
}

#one {
  left: 0;
  text-align: right
}

#two {
  right: 0;
  text-align: left
}

.inner {
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
  width: 100vw
}

<script>
  var IMG = new Array()
  IMG[0] = 'https://cdn.shopify.com/s/files/1/0224/5205/products/Siser_EasyWeed_Bright_Red_2048x.jpg?v=1523704262'
  IMG[1] = 'http://thezilla.com/wp-content/uploads/2015/07/blue.png'
  IMG[2] = 'http://d18nh7ureywlth.cloudfront.net/wp-content/uploads/6901-vibrant-green.jpg'

  var j = 0
  var p = IMG.length;
  var preBuffer = new Array()
  for (i = 0; i < p; i++) {
    preBuffer[i] = new Image()
    preBuffer[i].src = IMG[i]
  }
  var WI1 = Math.floor(Math.random() * p);
  var WI2 = Math.floor(Math.random() * (p - 1));
  if (WI2 >= WI1) {
    WI2 += 1;
  }

  function showImage1() {
    document.write('<img src="' + IMG[WI1] + '">');
  }

  function showImage2() {
    document.write('<img src="' + IMG[WI2] + '">');
  }
</script>
<div class=logo onClick="window.location.reload()"><span class=inner>( RANDOM DYPTICHS )</span></div>
<div id=one><span class=inner><script>showImage1();</script></span></div>
<div id=two><span class=inner><script>showImage2();</script></span></div>

Answer 1

Ideally, there is no need to use ajax either.

I simply used an addEventListener('click'...) and encapsulated your code.

Click on the screen and the images will change randomly.

To Note: Take into a habit of adding (;) where is needed, Javascript is not strict (unless using "use strict") on colons but it can cause a lot of bugs in the future. Also, use commas (' or ") in your attributes in HTML.

Read Javascript Style Guide written by W3 Schools, they do a good job explaining to newbies about famous javascript conventions around the globe.

---

var IMG = new Array(
  'https://i.picsum.photos/id/562/200/200.jpg?hmac=F4ylYRNFPH6rDzYo48_NUieJXXI2yaMl9ElwGeFQHZo',
  'https://i.picsum.photos/id/650/200/200.jpg?hmac=gu3C13pBxCSHokbnumczMYlmWRLt3CFGx1sDaPpfRnk',
  'https://i.picsum.photos/id/67/200/200.jpg?hmac=sN5XCCMqqmBvgDbYmAowWy2VToCkSYP5igDL_iRxK3M');

function getRandomImagePair() {
  var j = 0;
  var p = IMG.length;
  var preBuffer = new Array();

  for (i = 0; i < p; i++) {
    preBuffer[i] = new Image();
    preBuffer[i].src = IMG[i];
  }

  WI1 = Math.floor(Math.random() * p);
  WI2 = Math.floor(Math.random() * (p - 1));

  if (WI2 >= WI1) {
    WI2 += 1;
  }

  document.querySelector('#imgOne').src = IMG[WI1];
  document.querySelector('#imgTwo').src = IMG[WI2];
}

getRandomImagePair();

document.querySelector('.logo .inner').addEventListener('click', e => {
  getRandomImagePair();
});

body {
  border: 0;
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font: 2.1vw/1.2em HelveticaNeue, Arial, sans-serif;
  letter-spacing: .02em
}

.logo {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  text-align: center;
  z-index: 100;
}

#one,
#two {
  position: fixed;
  width: 50vw;
  top: 0;
  display: table
}

#one {
  left: 0;
  text-align: right
}

#two {
  right: 0;
  text-align: left
}

.inner {
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
  width: 100vw
}

<div class='logo'><span class='inner'>( RANDOM DYPTICHS )</span></div>
<div id='one'><span class='inner'><img id="imgOne" src="#" /></span></div>
<div id='two'><span class='inner'><img id="imgTwo" src="#" /></span></div>