OnClick Event showing error in Esri map Info window

Question

I have created a Esri map for add location, in this map user will search location and find its address. when user select related address map will take to him there and show a info Window with address and Lang and Lot, a Link which called "Add Location". i have done all above things but on "Add Location" link i assign a onClick function which not working saying function not define, see browser console. i don't understand why it is showing this. please have a look at link

 var map, gsvc, pt;

 require([
   "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
   "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
   "esri/SpatialReference", "esri/InfoTemplate", "esri/dijit/Search", "dojo/dom", "dojo/on",
   "dojo/domReady!"
 ], function(
   Map, Graphic, SimpleMarkerSymbol,
   GeometryService, ProjectParameters,
   SpatialReference, InfoTemplate, Search, dom, on
 ) {
   map = new Map("map", {
     basemap: "streets",
     center: [77.0167, 38.8833],
     zoom: 9
   });

   gsvc = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

   var search = new Search({
     map: map
   }, "search");

   search.startup()

   search.on("select-result", showLocation);

   function showLocation(e) {
     map.graphics.clear();
     var point = e.result.feature.geometry;
     var ppy = point.getLatitude().toFixed(4);
     var ppx = point.getLongitude().toFixed(4);

     map.infoWindow.setTitle("Search Result");
     map.infoWindow.setContent(e.result.name + ' test ' + ppy + ',' + ppx + '<br><a onClick="getaddress();" id="addloc" href="javascript:;">Add Location</a>');
     var s_res = e.result.name
     console.log(e.result.name);

     function getaddress() {
       alert('location added');
     }

     final_s_res = s_res.split(",");
     for (i = 0; i < final_s_res.length; i++) {
       console.log("<br /> Element " + i + " of the array is: " + final_s_res[i]);
     }
   }
 });

html,
body,
#map,
.map.container {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#info {
  top: 2px;
  color: #444;
  height: auto;
  font-family: arial;
  font-weight: bold;
  left: 69px;
  margin: 5px;
  padding: 10px;
  position: absolute;
  width: 260px;
  z-index: 40;
  border: solid 1px #003300;
  border-radius: 4px;
  background-color: #E5E5E5;
}
#search {
  display: block;
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 74px;
}
/*Beginning of search box modifications*/

.arcgisSearch .searchClear {
  background-color: #E5E5E5;
}
.arcgisSearch .esriIconZoom {
  background-image: url("finding.png");
  background-size: 20px 20px;
}
.esriIconZoom:before {
  content: "";
}
.arcgisSearch .searchGroup .searchInput,
.arcgisSearch .searchBtn,
.arcgisSearch .noResultsMenu,
.arcgisSearch .suggestionsMenu {
  border: 1px solid #003300;
  background-color: #E5E5E5;
}
.arcgisSearch .noValueText {
  color: red;
  font-size: 14px;
}
/*Beginning of popup modifications*/

.esriPopup .titlePane {
  background-color: #003300;
  border-bottom: 1px solid #121310;
  font-weight: bold;
}
.esriPopup a {
  color: #DAE896;
}
.esriPopup .contentPane,
.esriPopup .actionsPane,
.esriPopup .pointer,
.esriPopup .outerPointer {
  background-color: #B3B3B3;
}

<link href="https://js.arcgis.com/3.16/esri/css/esri.css" rel="stylesheet"/>
<link href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div id="search"></div>
<div id="map"></div>
<script src="https://js.arcgis.com/3.16/"></script>

Note: Esri map is client requirement.

Answer 1

This is because writing like <a onclick="getaddress()"> searches for getaddress in global scope, i.e. in window. But you have defined getaddress inside the showlocation method. So either take getaddress to global scope, or do the following

map.infoWindow.setContent(e.result.name +' test ' + ppy + ',' + ppx + '<br><a id="addloc" href="javascript:;">Add Location</a>');
var s_res = e.result.name
console.log(e.result.name, map.infoWindow);

// this does the magic
map.infoWindow.domNode.querySelector('#addloc').onclick = function getaddress(){  
   alert('location added');
}  

I have also modified the snippet here, check it below

 var map, gsvc, pt;

 require([
   "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
   "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
   "esri/SpatialReference", "esri/InfoTemplate", "esri/dijit/Search", "dojo/dom", "dojo/on",
   "dojo/domReady!"
 ], function(
   Map, Graphic, SimpleMarkerSymbol,
   GeometryService, ProjectParameters,
   SpatialReference, InfoTemplate, Search, dom, on
 ) {
   map = new Map("map", {
     basemap: "streets",
     center: [77.0167, 38.8833],
     zoom: 9
   });

   gsvc = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

   var search = new Search({
     map: map
   }, "search");

   search.startup()

   search.on("select-result", showLocation);

   function showLocation(e) {
     map.graphics.clear();
     var point = e.result.feature.geometry;
     var ppy = point.getLatitude().toFixed(4);
     var ppx = point.getLongitude().toFixed(4);

     map.infoWindow.setTitle("Search Result");
     map.infoWindow.setContent(e.result.name +' test ' + ppy + ',' + ppx + '<br><a id="addloc" href="javascript:;">Add Location</a>');
     var s_res = e.result.name
	 console.log(e.result.name);

     // adds onclick handler to the node
     map.infoWindow.domNode.querySelector('#addloc').onclick = function getaddress(){  
	       alert('location added');
    	}  

     final_s_res = s_res.split(",");
     for (i = 0; i < final_s_res.length; i++) {
       console.log("<br /> Element " + i + " of the array is: " + final_s_res[i]);
     }
   }
 });

html,
body,
#map,
.map.container {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#info {
  top: 2px;
  color: #444;
  height: auto;
  font-family: arial;
  font-weight: bold;
  left: 69px;
  margin: 5px;
  padding: 10px;
  position: absolute;
  width: 260px;
  z-index: 40;
  border: solid 1px #003300;
  border-radius: 4px;
  background-color: #E5E5E5;
}
#search {
  display: block;
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 74px;
}
/*Beginning of search box modifications*/

.arcgisSearch .searchClear {
  background-color: #E5E5E5;
}
.arcgisSearch .esriIconZoom {
  background-image: url("finding.png");
  background-size: 20px 20px;
}
.esriIconZoom:before {
  content: "";
}
.arcgisSearch .searchGroup .searchInput,
.arcgisSearch .searchBtn,
.arcgisSearch .noResultsMenu,
.arcgisSearch .suggestionsMenu {
  border: 1px solid #003300;
  background-color: #E5E5E5;
}
.arcgisSearch .noValueText {
  color: red;
  font-size: 14px;
}
/*Beginning of popup modifications*/

.esriPopup .titlePane {
  background-color: #003300;
  border-bottom: 1px solid #121310;
  font-weight: bold;
}
.esriPopup a {
  color: #DAE896;
}
.esriPopup .contentPane,
.esriPopup .actionsPane,
.esriPopup .pointer,
.esriPopup .outerPointer {
  background-color: #B3B3B3;
}

<link href="https://js.arcgis.com/3.16/esri/css/esri.css" rel="stylesheet"/>
<link href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div id="search"></div>
<div id="map"></div>
<script src="https://js.arcgis.com/3.16/"></script>