单击时使用javascript更改图像。 但为什么它不能很好地工作？

i have 4 images that i want to show in modal one by one. first i show one images, and there is a button to change the image when it's clicked. and it doesn't work. i need the solustions.. thank you very much.. this is the example of my page example and this is my code ;

<?php
$x="select * from tbbarang where idbarang='$r[idbarang]'";
$xx=mysqli_query($koneksi, $x);
$hasill=mysqli_fetch_array($xx);
?>
<img width="300px" height="150px" id="myImage<?php echo $i?>"    src="<?php echo $hasill['gmbr1'] ?>"> <br> <br>
<button class="btn btn-warning" onclick="changeImage(<?php echo $i?>)">Click to View Other Images</button>
<script>
   function changeImage(idd) {
    var image = document.getElementById("myImage"+idd);
    if (image.src.match("<?php echo $hasill['gmbr4'] ?>"))
   {
     image.src = "<?php echo $hasill['gmbr1'] ?>"; 

    } 
   else if (image.src.match("<?php echo $hasill['gmbr1'] ?>"))
   {
     image.src = "<?php echo $hasill['gmbr2'] ?>"; 

   }
   else if (image.src.match("<?php echo $hasill['gmbr2'] ?>"))
   {
     image.src = "<?php echo $hasill['gmbr3'] ?>"; 

   }

   else if (image.src.match("<?php echo $hasill['gmbr3'] ?>"))
   {
     image.src = "<?php echo $hasill['gmbr4'] ?>";


   }
   }
</script>

Your use of $hasill=mysqli_fetch_array($xx); doesn't seem to be correct.

try this:

$hasill=mysqli_fetch_array($xx,MYSQLI_ASSOC);

You shouldn't do SELECT *, always specify the columns you need to pull.

Console.log(image.src) in your function

   function changeImage(idd) {
    var image = document.getElementById("myImage"+idd);
    console.log(image.src);

I'll bet there's a bunch of http:// and such added by the browser that you don't have in the image src that you echo. Revise your code to something like this:

<img width="300px" height="150px" id="myImage<?php echo $i?>" data-currentimage=<?php echo $i; ?>   src="<?php echo $hasill['gmbr1'] ?>"> <br> <br>
<button class="btn btn-warning" onclick="changeImage(<?php echo $i?>)">Click to View Other Images</button>
<script>
   var imageGallery = [
     <?php echo  json_encode($hasill['gmbr1']); ?>
     ,<?php echo json_encode($hasill['gmbr2']); ?>
     ,<?php echo json_encode($hasill['gmbr3']); ?>
     ,<?php echo json_encode($hasill['gmbr4']); ?>
   ];

   function changeImage(idd) {
    var image = document.getElementById("myImage"+idd);
    var currentImageIndex = (image.dataset['currentimage'] + 1) % imageGallery.length;
    image.src = imageGallery[currentImageIndex];
    image.dataset['currentimage'] = currentImageIndex;
   }
</script>

If your situation allows it, you could skip the inline function call and do this

<img width="300px" height="150px" id="galleryImageViewer" data-currentimage=<?php echo $i; ?> src="<?php echo $hasill['gmbr1'] ?>"> <br> <br>
<button id="galleryChanger" class="btn btn-warning">Click to View Other Images</button>
<script>
   var imageGallery = [
     <?php echo  json_encode($hasill['gmbr1']); ?>
     ,<?php echo json_encode($hasill['gmbr2']); ?>
     ,<?php echo json_encode($hasill['gmbr3']); ?>
     ,<?php echo json_encode($hasill['gmbr4']); ?>
   ];
   var galleryImageViewer = document.getElementById('galleryImageViewer');
   document.getElementById("galleryChanger").addEventListener('click',function() {
     changeImage(galleryImageViewer);
   });
   function changeImage(image ) {
    var currentImageIndex = (image.dataset['currentimage'] + 1) % imageGallery.length;
    image.src = imageGallery[currentImageIndex];
    image.dataset['currentimage'] = currentImageIndex;
   }
</script>