Question

<script type="text/ecmascript">
<![CDATA[
function setCoordinates(evt) {
var centerX = Math.round(Math.random() * 1000);
var centerY = Math.round(Math.random() * 1000);      
evt.target.setAttributeNS(null,"cx",centerX);
evt.target.setAttributeNS(null,"cy",centerY);
}
]]>
</script>

That’s my function.
I’m really stuck on how to parse (not sure if that’s the right word) the result to the attributes in a circle.

Let’s say my circle is the following:

<circle cx="0" cy="0" r="10" fill="red" />

What is the Javascript required to call the function and thus parse the attribute values to the circle?

Answer 1

I don’t think you want an event to be involved. You probably want something like

function setCoordinates(circle) {
  var centerX = Math.round(Math.random() * 1000);
  var centerY = Math.round(Math.random() * 1000);      
  circle.setAttribute("cx",centerX);
  circle.setAttribute("cy",centerY);
}

(setAttributeNS() is not needed if you’re using the null namespace anyway.)

If you give your circle an ID, like

<circle cx="0" cy="0" r="10" fill="red" id="myCircle"/>

then you can change the coordinates with code like

setCoordinates(document.getElementById("myCircle"));