相册 - td 的 onclick 不会使用其功能更改图像 src答案

【问题标题】：Album - td's onclick is not changing image src with its function相册 - td 的 onclick 不会使用其功能更改图像 src
【发布时间】：2017-04-11 03:03:43
【问题描述】：

（最后，）我几乎完成了为我的博客编写专辑代码。但是我在测试的时候，td标签的onclick函数坏了。

<td class="null right" onclick="next();return false;">
/*The next function is to change image to next one*/

我点击了那个td，中间的图片应该改了，但没有。代码有问题吗？

https://jsfiddle.net/7oafsf0u/

【问题讨论】：

将 js 放入正文中（在关闭正文标记之前） - 检查“javascript”按钮，“加载类型”部分，在小提琴中：jsfiddle.net/7oafsf0u/3
@nevermind，这行得通，但是'onLoad'和'no wrap in body'有什么区别？我可以把js放在'head'中吗？
stackoverflow.com/questions/5468350/…

标签： javascript html onclick html-table image-gallery

【解决方案1】：

工作正常。也许sn-p有问题。

我建议使用tbody 标签。

var myImage= new Array(); 
myImage[0]="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg";       
myImage[1]="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_be2b9e45c671f95b8bc9fde58dbbd1154b0b633a.600x338.jpg";
myImage[2]="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_3da42391c6317205177248dea0a48ced89998a8d.600x338.jpg";
myImage[3]="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_bb2ee3b9b48a60857873192cfff10546e01d4a86.600x338.jpg";

var count = 0;

function next(){
count++;
document.getElementById("album").src = myImage[count];
}

.album {
  vertical-align: middle;
  text-align: center;
  width: 100%;
}
.album-table td {
  vertical-align: middle;
  overflow: hidden;
}
.album-table td:hover {
  background-color: #E0F1FF;
}
.arrow {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.left {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.right {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.left:hover, .right:hover {
  cursor: pointer; cursor: hand;
  background-color: #CEE9FF;
}

<table class="album-table">

<tr><td class="null left">
<img class="arrow" src="http://i.imgur.com/2q4MZDO.png" />
</td>
<td class="null">
<img id="album" class="album" src="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg" />
</td>
<td class="null right" onclick="next()">
<img class="arrow" src="http://i.imgur.com/D0Wt0OJ.png" />
</td></tr>

</table>

【讨论】：

我将上面的代码复制并粘贴到一个新的 jsfiddle 沙箱中，它在那里不工作，但在这里工作。为什么？
@ll55 可能有些问题。