javascript - Update image source on button click

Question

I'm looking for a way to update an image in response to a user clicking the table that contains it.

This is my HTML:

<table width="100%" border="0" id="bottoneM">
    <tr><td width="18%"></td>
        <td>
            <fieldset id="sugg_risp">
                <center>
                    <table border="0" height="100%" width="100%">
                        <tr>
                            <td width="2%" align="center"></td><td width="2%"></td>
                            <td height="100%" width="88%" align="left">
                                <font face="Geneva, Arial, Helvetica, sans-serif">Descrivi il tuo problema</font>
                                </a></td>
                            <td>

                                <IMG SRC="freccia1.gif" name="PHOTO_CHANCE" >

                            </td>
                        </tr>
                    </table>
                </center>
            </fieldset>
        </td>
        <td width="18%"></td>
    </tr><tr><td></td><td>
            <div id="menuM" style="display:none;">
                <table border="0" height="100%" width="100%">
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva, Arial, Helvetica, sans-serif">Cosa 1</font>
                            </a></td>
                    </tr>
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva, Arial, Helvetica, sans-serif">Cosa 2</font>
                            </a></td>
                    </tr>
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva, Arial, Helvetica, sans-serif">Cosa 3</font>
                            </a></td>
                    </tr>
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva, Arial, Helvetica, sans-serif">Cosa 4</font>
                            </a></td>
                    </tr>
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva, Arial, Helvetica, sans-serif">Cosa 5</font>
                            </a></td>
                    </tr>
                </table>
            </div>
        </td></tr>
    </td>
</table>

When I click the table id="bottoneM", I would like to change "freccia1.gif" to "freccia2.gif".

The page uses this JavaScript/JQuery for the list that appears:

$(document).ready(function(){
  $("#bottoneM").click(function(){
    $("#menuM").slideToggle();
  }); 
});

Thank you so much for the replies!

Answer 1

Since you are using JQuery already, you can use attr() to update the src attribute.

$(document).ready(() => {
  const myImage = $('#my-image');
  const urls = [
    'https://placeimg.com/200/200/animals',
    'https://placeimg.com/200/200/people',
    'https://placeimg.com/200/200/arch',
    'https://placeimg.com/200/200/nature',
    'https://placeimg.com/200/200/tech'
  ];
  let i = 0;
  $('#my-button').click(() => {
    if (i < urls.length - 1) i++;
    else i = 0;
    myImage.attr('src', urls[i]);
  });
});

#container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="my-button">Refresh</button>
  <img src="https://placeimg.com/200/200/animals" id="my-image" alt="image" />
<div>