专辑 - td的onclick不改变它的功能的图像src

Question

（最后，）我几乎写完我的博客专辑代码。但是当我测试它时，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/

Answer 1

工作正常。也许在片段中有一些问题。我们推荐使用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>