A-frame : how to change image using javascript

Question

What JavaScript is needed to change the image? I can't work out how to target them:

<a-scene stats>
<a-sky src="../1/img/2.jpg"></a-sky>
  <a-assets>
    <img id="my-image" src="../1/img/bear.png" >
    <img id="bear2" src="../1/img/bear.png" >
    <img id="bear3" src="../1/img/bear.png" >
  </a-assets>
  <!-- Using the asset management system. -->
  <a-image src="#my-image" width="10" height="10" position="-5 1 -7" rotation="0 10 0"></a-image>
  <a-image src="#bear2" width="10" height="10" position="5 1 -5" rotation="0 -60 0"></a-image>
  <a-image src="#bear3" width="150" height="150" position="-45 2 100"></a-image>
  <!-- Defining the URL inline. Not recommended but more comfortable for web developers.-->

Answer 1

document.querySelector('#my-image').setAttribute('src', 'foo.jpg')

https://aframe.io/docs/0.4.0/guides/using-javascript-and-dom-apis.html