As I load data from SQL in a while loop to create my SVG, each record has its own ID. However, when attempting to retrieve the ID using getelementbyId, it consistently returns null values.
Below is the code snippet:
#!/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[
// Even with the 'onload' function, the issue persists.
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>
);
}Thank you