changing the fill of the <use> tag using JS

[1GR3]

This is my symbol:

<symbol id="circ">
  <circle>
    <animate attributeName="r" begin="enable" from="10" to="80" dur=".6" />
    <animate attributeName="cy"  begin="enable" from="0" to="-50" dur=".6" />
    <animate attributeName="opacity"  begin="enable" from=".5" to=".25" dur=".6" />

    <animate attributeName="r" begin="enable+.6" to="10" from="80" dur=".4" />
    <animate attributeName="cy"  begin="enable+.6" to="-125" from="-50" dur=".4" />
    <animate attributeName="opacity"  begin="enable" from=".25" to=".75" dur=".4" />
  </circle>
</symbol>

I can change its fill in SVG by adding the fill attribute directly like this:

<g id="o1" transform="rotate(30)" >
  <use href="#circ" class="oval" fill="#ABCDEF"/>
</g>

but not trough JS like this:

var o1= document.getElementById("o1");
o1.getElementsByClassName("oval").style.fill = "#ABCDEF";

nor like this:

o2.getElementsByTagName("use").style.fill = "#ABCDEF";

(the svg <use> element does not contain the fill attribute in my JS attempts)

It seems that these are not the proper way of selection because:

Unhandled exception: TypeError: Cannot set property 'fill' of undefined

How can I fix this?

[Gondwana · Accepted solution]

Off the top of my head, I suspect getElementsBy... returns an array, and not just an element. If you're certain there should be only one element, you could stick a [0] in there somewhere. Otherwise, iterate.