使用Jetbrains Webstorm更改HTML5和Javascript中图像的src

Question

so I've been trying to make X and Os for a HTML5/JS course project thinking it would be easy, but have had several days of trouble trying to change an image's source from "Tile.png" to "XX.png". I have found similar threads on the site on very similar problems, but none of them worked for me, they all got the 'rare' error though, so I'm thinking there's a double whammy going on here. Help pls!

Here are the two errors I've seen during the hundreds of attempts using javascript and HTML5 for various attempts.

Uncaught ReferenceError: $ is not defined client.js:102
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

or

attempt to set image src to null (This showed up in most attempts, the other error is a rare occurrence that shows up when I think I've nailed it.)

- The code consists of a HTML5 file and a Javascript file which just holds variables that aren't used yet. Here is the problem code showing the javascript function and the HTML button and clicking that runs it. The error pops up when the button is clicked, so I believe the code is in the javascript part.

<script>
  function YUNOCHANGE()
  {
    var img = document.getElementById("tst1");
    img.src = "Images/XT.png";
  }
</script>

<button onclick="YUNOCHANGE();" type="button" id="tst1" name="One" alt="Grey tile" height="175" width="200" style="text-align:center">
  <img src="Tile.png"/>
</button>

Answer 1

The Button has no property "src":

<script>
  function YUNOCHANGE()
  {
    var img = document.getElementById("img1");
    img.src = "Images/XT.png";
  }
</script>

<button onclick="YUNOCHANGE();" type="button" id="tst1" name="One" alt="Grey tile" height="175" width="200" style="text-align:center">
  <img id="img1" src="Tile.png"/>
</button>