title: A-frame button onClick changes object
body: <p>I'm trying to create something in A-frame (aframe.io) where when a button onclick event happens, a cube will change colors. Here is my current code:</p>
  <pre><code> &lt;script src=&quot;https://aframe.io/releases/1.2.0/aframe.min.js&quot;&gt;&lt;/script&gt;
  &lt;button style=&quot;z-index: 999; position: fixed&quot;&gt;RESIZE&lt;/button&gt;
  &lt;script&gt;
    AFRAME.registerComponent(&quot;foo&quot;, {
      init: function() {
        const btn = document.querySelector(&quot;button&quot;);
        const sphere = document.querySelector(&quot;a-sphere&quot;);
        btn.addEventListener(&quot;click&quot;, e =&gt; {
           sphere.setAttribute(&quot;color&quot;,&quot;red&quot;);
        })
      }
    })
  &lt;/script&gt;
  &lt;a-scene foo&gt;
    &lt;a-sphere position=&quot;0 1.25 -5&quot; radius=&quot;1.25&quot; color=&quot;#EF2D5E&quot;&gt;&lt;/a-sphere&gt;
  &lt;/a-scene&gt;
  </code></pre>
  <p>The code here works perfectly but its not using an onclick event. How can I change the code above so when there is an onclick function on the button and when that function occurs the color changes? Just clarifying, I know the code above is working perfectly but it's using an event listener to tell when the button is being clicked, I need to change that to an onclick event.</p>