永久设置新的图像源

Question

我试图随机替换网格中的图像。每次触发功能时，新图像会短暂闪烁（在Chrome中），但是旧图像会重新出现。我知道为什么我有这个问题有一个非常简单的解释，但当然，我无法弄清楚。任何帮助都将不胜感激。

该问题的网站是http://www.apocwords.net/systems/randomdungeon.html。如果您点击Randomize Me！字样，顶部，左侧，右侧和底部的块应切换到新的随机选择的图像。

function createMe() { 
document.getElementById("left2").src = xLefts[Math.floor(Math.random()* xLefts.length)]; 
document.getElementById("left3").src = xLefts[Math.floor(Math.random()* xLefts.length)]; 
document.getElementById("left4").src = xLefts[Math.floor(Math.random()* xLefts.length)]; 
} 

The HTML: 
<img src="/images/templates/template_left_05.jpg" width="100" height="200" id="left2" class="template"/> 
<img src="/images/templates/template_left_01.jpg" width="100" height="200" id="left3" class="template"/> 
<img src="/images/templates/template_left_02.jpg" width="100" height="200" id="left4" class="template"/> 

我确信有一百万种方法可以做我想做得更好，更快，更有效的事情。但是，我现在不在乎这一点。我只是想知道为什么我试图做的不工作。提前致谢！

Answer 1

你的问题是你的链接中有“href”属性。当你点击它时，你会为同一页面发出新的请求。你可以：

1. 删除它并在链接上使用this css property，使“手”指针。
2. 使用this jQuery method

Answer 2

变化的随机化链接...

<a href="javascript:createMe(); return false;">Randomize Me!</a>