JavaScript - Add Graphics to an existing Arcgis map - arcgis

Question

I have an ArcGis map created using following code. I have a button on the page which is supposed to add graphics to the map on click. But it throws a JavaScript error "Error: Tried to register widget with id==xxx but that id is already registered". Any clue is welcome.
<script>
var map;
require([
"esri/map",
// Map initialization code....
});
function addSecond() {
//add pre-defined geometries to map
var polygonSymbol = new SimpleFillSymbol();
var triangle = new Polygon({
"rings": [
[
[2426417, 8535508],
[4304933, 12292541],
[6183449, 8535508],
[2426417, 8535508]
]
],
"spatialReference": {
"wkid": 102100
}
});
map.graphics.add(new Graphic(triangle, polygonSymbol));
}
</script>
Jsfiddle - http://jsfiddle.net/L1peybqh/

Answer 1

The root problem as I mentioned in the question was, I should be able to add graphics to the map on click of a button. I was implementing the ArcGIS API incorrectly, I was supposed to add the event listener inside the required function. A simplified version of the code I ended up looked like this.
<script>
var map, editToolbar;
var mapObj;
require([
"esri/map",
"esri/toolbars/edit",
"esri/graphic",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"dojo/_base/event",
"dojo/parser",
"dojo/dom",
"dojo/dom-style",
"dijit/registry",
"dijit/Menu",
"dijit/form/ToggleButton",
"dijit/form/DropDownButton",
"dijit/CheckedMenuItem",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map, Edit, Graphic,
Point, Polyline, Polygon,
SimpleLineSymbol, SimpleFillSymbol, TextSymbol,
event, parser, dom, domStyle, registry, Menu
) {
parser.parse();
domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");
map = new Map("map", {
basemap: "streets",
center: [3.955, 59.338],
zoom: 3
});
map.on("load", createToolbar);
function addGraphics() {
//add pre-defined geometries to map
var polygonSymbol = new SimpleFillSymbol();
var polygon = new Polygon({
"rings": [
[
[-4226661, 8496372],
[-3835304, 8731187],
[-2269873, 9005137],
[-1213208, 8613780]
]
],
"spatialReference": {
"wkid": 102100
}
});
map.graphics.add(new Graphic(polygon, polygonSymbol));
}
function addSecond() {
var polygonSymbol = new SimpleFillSymbol();
console.log(mapObj.features[0].geometry.coordinates);
var triangle = new Polygon({
"rings":
mapObj.features[0].geometry.coordinates
,
"spatialReference": {
"wkid": 102100
}
});
map.graphics.add(new Graphic(triangle, polygonSymbol));
}
$('#x').click(function(){
addSecond();
});
});
</script>