javascript - 调用函数而不是重新加载页面

Question

基本上我有这个函数，可以从文件夹中选取两个不同的随机图像。目前，我正在使用 onClick="window.location.reload() 在每次点击时运行该函数。

我是否可以在不刷新页面的情况下调用函数onClick？

提前致谢。

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

理想情况下，也不需要使用ajax。

我只是使用了 addEventListener('click'...)和 encapsulated你的代码。

点击屏幕，图像会随机变化。

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>