JavaScript链接在点击时不起作用;函数在页面加载时工作

Question

var randomNumber
// generate the random numbers based on the length of the image array
randomNumber = Math.floor(Math.random() * topImages.length);
function shuffleTop(){
  document.getElementById("topImage").src = topImages[randomNumber];
};
$("p a#shuffle").click(shuffleTop());

这是我在源代码中的链接：

<p><a href="#" id="shuffle">SHUFFLE</a></p>

Answer 1

您正在运行该函数，并且它返回的内容正在分配给 cliek。您没有为函数分配对函数 shuffleTop 的引用。

$("p a#shuffle").click(shuffleTop());

需要

$("p a#shuffle").click(shuffleTop);

并且您只生成一次数字，将随机数生成器移到里面。

function shuffleTop(){
  randomNumber = Math.floor(Math.random() * topImages.length);
  document.getElementById("topImage").src = topImages[randomNumber];
};

Answer 2

您需要为点击事件提供函数回调：

$("p a#shuffle").click(shuffleTop);

Answer 3

如果你使用的是jQuery，不妨使用jQuery来设置图像src。

$("#topImage").attr("src",topImages[randomNumber]);

我假设topImages[randomNumber]已经包含相对于HTML页面的图像的URL。

Answer 4

首先，如果你有jQuery，为什么使用纯js？

randomNumber = Math.floor(Math.random() * topImages.length);
function shuffleTop(){
  $("#topImage").attr('src', topImages[randomNumber]);
};
$("p a#shuffle").on('click', shuffleTop); // i re-write this to call function.

它必须工作