按钮单击时的随机图像

Question

我的代码有点问题，它应该从我的 mysql 数据库中获取所有图片名称。然后当我点击按钮时，它应该给我下一张图片等等，但它只适用于第一张图片和第二张图片。

include_once 'connect.php';

$place="upload/";
$first = mysql_query("SELECT * FROM images ORDER BY RAND()");

while($wor = mysql_fetch_array($first))
{
    $id=$wor['id'];
    $name = $wor['name'];
    $image = $place . $wor['name'];
}

$number="1";
$wrongnumber="2";
$r = mysql_query("SELECT * FROM images ORDER BY RAND()");
echo '<script> ';

while($wor = mysql_fetch_array($r))
{
    $id=$wor['id'];
    $name = $wor['name'];
    $images = $place . $wor['name'];
    $number=$number + 1;
    $wrongnumber=$wrongnumber + 1;

    echo 'function ' . 'changeSrc' . $number . '() '; ?>

{
    document.getElementById("rand").src="<? echo $images;?>";
    document.getElementById("button").onclick="changeSrc<? echo $wrongnumber;?>()";
}

<?
}
?> 

</script>
<img id="rand" src="<? echo $image;?>"><br>
<input id="button" type="button" onclick="changeSrc2()" value="Change image">

这里是输出代码：

<script> function changeSrc2() {
document.getElementById("rand").src="upload/1329614460tumblr_lqd5m3svzy1qg7sdjo1_500- 450x299.jpg";
document.getElementById("button").onclick="changeSrc3";
}
function changeSrc3() {
document.getElementById("rand").src="upload/1349616418121.jpg";
document.getElementById("button").onclick="changeSrc4";
}
function changeSrc4() {
document.getElementById("rand").src="upload/1329614513beuty_ass_by_boobsaplenty-500x375.jpg";
document.getElementById("button").onclick="changeSrc5";
}
function changeSrc5() {
document.getElementById("rand").src="upload/1329614538tumblr_lqunpmqwkw1qd33kzo1_500-450x690.jpg";
document.getElementById("button").onclick="changeSrc6";
}
function changeSrc6() {
document.getElementById("rand").src="upload/1349619307women_panties.jpg";
document.getElementById("button").onclick="changeSrc7";
}
function changeSrc7() {
document.getElementById("rand").src="upload/1339140972sandy-marina-soccer-01.jpg";
document.getElementById("button").onclick="changeSrc8";
}
function changeSrc8() {
document.getElementById("rand").src="upload/1329614576tumblr_lsz0k0MLhT1qd33kzo1_500-450x495.jpg";
document.getElementById("button").onclick="changeSrc9";
}
function changeSrc9() {
document.getElementById("rand").src="upload/1329614539tumblr_lsaixi0igS1qd33kzo1_500-450x674.jpg";
document.getElementById("button").onclick="changeSrc10";
}
function changeSrc10() {
document.getElementById("rand").src="upload/1349619990tumblr_lrqx1vESE51qhatv8o1_500.jpg";
document.getElementById("button").onclick="changeSrc11";
}

</script>
<img id="rand" src="upload/1329614520daily_erotic_picdump_70-500x677.jpg"><br>
<input id="button" type="button" onclick="changeSrc2()" value="Change image">

Answer 1

在设置 onclick 处理程序时尝试删除括号：

 document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>;

根据规范，onclick 不应包含括号 - https://developer.mozilla.org/en-US/docs/DOM/element.onclick

Answer 2

这里适合初学者

<input id="button" type="button" onclick="changeSrc2()" value="Change image">

onclick 属性被硬编码为始终 changeSrc2() 函数，因此始终仅从第一张图像更改为第二张图像。