CODEWITHSUNDEEP
phpjavascriptajaximagerandom
ak_37
ak_37

Reputation: 27

Random image on button click

I have a little problem with my code it should get all the picture names from my mysql database. Then when I click by button it should give me the next image and so on but it only works for the first image and second image.

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">

here are the output code:

<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">

Upvotes: 1

Views: 1119

Answers (2)

Sol
Sol

Reputation: 1173

Try removing the parenthese when setting your onclick handler like this:

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

According to the spec, onclick shouldn't include the parentheses - https://developer.mozilla.org/en-US/docs/DOM/element.onclick

Upvotes: 1

Vlad Lyga
Vlad Lyga

Reputation: 1143

Well for starters here

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

the onclick attribute is hardcoded to always changeSrc2() function therefore always changing only from the first to the second image.

Upvotes: 2

Related Questions