CODEWITHSUNDEEP
javascripthtmlhyperlinkelement
Anthony Timpson
Anthony Timpson

Reputation: 33

HTML links not working as expected (Code executes on load and does not execute on click)

Programatically i am creating elements like this. 

<dt onclick="[object Window]" class="detailHeader" id="PZON2012008" style="cursor: pointer;">Permit ID: PZON2012008<dd class="PARCELAREA" id="1.92" style="color: rgb(0, 0, 0);">PARCELAREA: 1.92</dd><dd class="AREATYPE" id="AC" style="color: rgb(0, 0, 0);">AREATYPE: AC</dd><dd class="PARCEL" id="113-12-002A" style="color: rgb(0, 0, 0);">PARCEL: 113-12-002A</dd><dd class="ADDRESS" id="5401 E COMMERCE AVE" style="color: rgb(0, 0, 0);">ADDRESS: 5401 E COMMERCE AVE</dd><br></dt>

The onlick=[objectwindow] is defined for each as

permitNode.setAttribute("onclick", window.open('ParcelViewer.jsp?dr_parcelid='+attributes.PARCEL, "Parcel Viewer", "toolbar=yes, scrollbars=1,resizable=1,height=768,width=1024"));

Here is the code I am running to create each dt element. 

for(i=0;i<this._singles.length;i++)
  {
      //var parcelWindow = window.open('ParcelViewer.jsp?dr_parcelid='+attributes.PARCEL, 'toolbar=yes');
      var attributes = this._singles[i].attributes;
      console.log(attributes.PARCEL);
      //var parcelWindow = window.open('ParcelViewer.jsp?dr_parcelid='+attributes.PARCEL, "Parcel Viewer", "toolbar=yes, scrollbars=1,resizable=1,height=768,width=1024");
      //console.log(parcelWindow);
      var permitNode = null;

      permitNode = document.createElement("DT");
      permitNode.setAttribute("onclick", window.open('ParcelViewer.jsp?dr_parcelid='+attributes.PARCEL, "Parcel Viewer", "toolbar=yes, scrollbars=1,resizable=1,height=768,width=1024"));
      permitNode.setAttribute("class", "detailHeader");
      permitNode.setAttribute("id", attributes.PERMIT);

      //permitNode.setAttribute("onclick", parcelWindow);

      permitNode.style.cssText = 'color: #0000EE';
      permitNode.style.cssText = 'cursor: pointer';

      var br = document.createElement("br");
      var b = document.createElement("b");
      var textNode = document.createTextNode("Permit ID: "+attributes.PERMIT);

      //permitNode.appendChild(checkbox);
      permitNode.appendChild(textNode);
      outArray.push(attributes.PERMIT);

      for(var key in attributes)
      {  
        //console.log(key);
        if(key != "PERMIT" && key != "clusterId" && key != "undefined" && key !=outFields[0])
          {
            var dataNode = document.createElement("DD");
            var dataText = document.createTextNode(key+": "+attributes[key]);
            dataNode.style.cssText = 'color: #000';
            dataNode.setAttribute("class", key);
            dataNode.setAttribute("id", attributes[key]);
            dataNode.appendChild(dataText);  
            permitNode.appendChild(dataNode);
            permitNode.appendChild(br);                
          }
      }
      document.getElementById("clusterattributes").appendChild(permitNode);
      console.log(permitNode);
  }

Upvotes: 0

Views: 53

Answers (2)

Sergii Shvager
Sergii Shvager

Reputation: 1256

It's better to use addEventListener()

permitNode.addEventListener('click', function(){
    window.open('ParcelViewer.jsp?dr_parcelid='+attributes.PARCEL, "Parcel Viewer", "toolbar=yes, scrollbars=1,resizable=1,height=768,width=1024");
}, false);

Upvotes: 2

SparK
SparK

Reputation: 5211

I would recomend not using the attribute approach as it uses strings for code.

permitNode.onclick = function(){
    window.open('ParcelViewer.jsp?dr_parcelid='+attributes.PARCEL, "Parcel Viewer", "toolbar=yes, scrollbars=1,resizable=1,height=768,width=1024");
};

This will override the click behavior without resorting to html attributes.

Upvotes: 1

Related Questions