Question

I am writing a web application which pulls data from a MYSQL database using php. No problem with that side. The selected data is used to create ultimately an SVG image showing sports exercises for coaching. Works well so far. Now I want to be able to use an SVG "onMouseOver" mouse call from the embedded svg code to a Javascript function to display textual information regarding the coaching points for the exercise. The svg code is embedded in a php sprintf function.

$ID="E".$yourArray[$y-1]['ExerciseID'];
echo "Exercise ID is....". $ID."<br>";

$tablesvg=$tablesvg .sprintf('<use xlink:href="#table" id="%3$s" onMouseOver="showID()" fill="beige" x="%1$d" y="%2$d"/>',$tb1xcoord, $tbycoordoffset,$ID);

Problem is that no data from the php variable displays within the javascript function shown below. Function is stable as the Alert text displays.

<script type="text/JavaScript">

  function showID()
  {
    var jsvar = '<?php echo $ID;?>';
    var test=document.getElementById(jsvar).getAttributeNS(null,"fill");
    alert("Exercise ID is:" + test);
  }
</script>

As long as I don't try to pass the PHP variable it does work - the DOM part in the JS function works if I hard code the value (E1).

Answer 1

Pass the element as an argument to the function, rather than using the ID from the variable and then calling getElementById

$ID="E".$yourArray[$y-1]['ExerciseID'];
echo "Exercise ID is....". $ID."<br>";

$tablesvg=$tablesvg .sprintf('<use xlink:href="#table" id="%3$s" onMouseOver="showID(this)" fill="beige" x="%1$d" y="%2$d"/>',$tb1xcoord, $tbycoordoffset,$ID);

Then change the JS to:

<script type="text/JavaScript">

  function showID(elt)
  {
    var test=elt.id;
    alert("Exercise ID is:" + test);
  }
</script>

Passing PHP variable embedded in SVG to Javascript function

1 个答案: