Question

I am loading data from SQL in a while loop which draws my SVG. within my data each record is has its own ID.

I am trying to load the ID through the getelementbyId, but keeps returning null values.

Here is my code.

#!/usr/bin/perl
use DBI;
use CGI::Carp qw(fatalsToBrowser);
print "content-type: text/html\n\n";
print "Content-Type: image/svg-xml\n\n" ;
$dbh = DBI->connect ('dbi:Oracle:******','*****','*****')
|| die "database connection not made: $DBI::errstr";

$sth = $dbh->prepare("SELECT Find_id, xcoord, ycoord, gisteach.finds.type, gisteach.class.type, depth, name, period, use FROM GISTEACH.finds, GISTEACH.class where gisteach.finds.type = gisteach.class.type");
$sth->execute();

$sth1 = $dbh->prepare("SELECT lowx, hix, lowy, hiy, Field_id, owner, GISTEACH.FIELDS.crop, GISTEACH.crops.crop, name from GISTEACH.FIELDS, gisteach.crops where gisteach.crops.crop = gisteach.fields.crop");
$sth1->execute(); 

print qq(<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
  "http://www.w3.org/tr/2000/cr-svg-20001102/DTD/svg-20001102.dtd">);  
print qq(<svg width="20cm" height="20cm" viewBox="-1 -18 20 20" onload="getid(ID)">);

print qq (<script type="text/ecmascript">);
print qq (<![CDATA[  

  // with out this (onload) i still have teh same issue.
  function getid(ID){ 
  (document.getElementById('ID'));
   }
  function MakeTransparent(evt) {
      evt.target.setAttributeNS(null,"opacity","0.5")
    }
  function MakeOpaque(evt) {
      evt.target.setAttributeNS(null,"opacity","1")
    }   


  function buttonClick(){
      var type = document.getElementById('ID');
      var data = type.getAttribute('d')
      var data2 = type.getAttribute('d2')
      var data3 = type.getAttribute('d3')     
      alert ("This Find can be placed in the: " + data2 + " age. In which its primary use was; " + data3 );
    }

    function buttonClick2() {  
      var type = document.getElementById('ID')             
      var data1 = type.getAttribute('b')
      var data2 = type.getAttribute('c')

      alert ("Owner of this field is: " + data1 + "  Where " + data2 + " are growing" );
    }
    ]]>);   
print qq (</script>);

while (@data = $sth1->fetchrow_array()) {

print qq(    
  <g transform="scale(1,-1)" > 
      <polygon points="$data[0],$data[2] $data[1],$data[2] $data[1],$data[3] $data[0],$data[3]" 
        fill="green"  
           ID="$data[4]"  
             b="$data[5]"
              c="$data[8]"
                opacity="1"
              stroke="black" 
            stroke-width="0.05"
         onmouseover="MakeTransparent(evt)" 
       onmouseout="MakeOpaque(evt)" 
    onmouseup="buttonClick2()"/>      
   </g>                                   
  );    
}
while (@data = $sth->fetchrow_array()) {
print qq(  
    <g transform="scale(1,-1)"  >
       <circle           
         ID="$data[0]" 
          cx="$data[1]"        
            cy="$data[2]" 
              r="0.17"
            d="$data[6]"
          d2="$data[7]"
        d3="$data[8]"                
      fill="red"
     onmouseup="buttonClick()"/>

</g>    
  ); 
 }  enter code here

Thanks

Answer 1

function getid(ID){ 
    (document.getElementById('ID'));
}

should become

function getid(ID){ 
    return document.getElementById(ID);
}

Otherwise you’re just looking for an element with id of value ‘ID’