<tr><!-- 8 --> <td id = "8A"><!-- A --> <img src="Media/empty_square_white.png" height="160px" width ="160px"> </td> ... <script> function changeSource(){ document.getElementById("8A").src="empty_square_brown.png"; } </script> <button onclick="changeSource">change</button>Esto es lo que he intentado hacer, sin embargo, cuando presiono el botón, parece que no sucede nada. También intenté hacer esto sin el botón, sin embargo, tampoco pareció funcionar, también definí la identificación usando CSS interno. Gracias
Su identificación hace referencia al td circundante que no tiene atributo src. Debe establecer la identificación en el elemento img o hacer referencia al elemento secundario.
Además, a su nuevo valor "empty_square_brown.png" le falta la ruta establecida en la fuente original "Media/" y la llamada onclick necesita los corchetes de función. Aquí algunos ejemplos de trabajo. Con un atributo de título para mostrar el efecto.
<tr><!-- 8 --> <td><!-- A --> <img id="8A" src="Media/empty_square_white.png" height="160px" width ="160px" title="empty_square_white.png"> </td> ... <script> function changeSource(){ document.getElementById("8A").src="Media/empty_square_brown.png"; document.getElementById("8A").title="empty_square_brown.png"; } </script> <button onclick="changeSource()">change</button>Puedes probar esto.
function changeImg(){ document.getElementById("image").src = "https://images.unsplash.com/photo-1581618048854-b2f6f877cef3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" } img{ width:50px; height:50px; } <table border=1> <tr> <td > <img id="image" src="https://images.unsplash.com/photo-1626285094808-143d7bb02f14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" onclick="changeImg()"> </td> <td> <img src="#" alt=""> </td> </tr> </table>