help to add html code to variable in JavaScript array

I have this variable...

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks"}
};


I want to add an image at the end so it display Tasks - myImage

How I do that, I try without luck ...

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks - <img src=myImage>" }
};

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks &lt;img src=myImage&gt;" }
};

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks" + document.write('<img src=myImage>"); }
};

please advice... thanks!
LVL 8
a0k0a7Asked:
Who is Participating?
 
AFUEGOConnect With a Mentor Commented:
You need the following changes to the code....

#1 change variable definitions
#2 update AddGeoXML function
#3 update AddTR function

-Good Luck
var layers = {
 "activities": 
 {"url": "http://www.afuego.com",
  "name": "Activities" ,
  "image": "http://www.afuego.com/img/logo.gif" }  , 
 "tasks": 
 {"url": "http://www.afuego.com",
  "name": "Tasks",
   "image": "http://www.afuego.com/img/logo.gif" }
};
 
 
function addGeoXML() {
  var theUrl = document.getElementById("url").value;
  var theImage = document.getElementById("image").value;
  
  theUrl = theUrl.replace(/^\s+/, "");
  theUrl = theUrl.replace(/\s+$/, "");
  
  theImage = theUrl.replace(/^\s+/, "");
  theImage = theUrl.replace(/\s+$/, "");
  
  if (theUrl.indexOf(' ') != -1 && theImage.indexOf(' ') != -1) {
    alert('Error - that address has a space in it');
  } else {
    var id = "userAdded" + userAdded;
    layers[id] = {};
    layers[id].url = theUrl;
    layers[id].image = theImage;
    layers[id].name = "User Layer " + userAdded;
 
    addTR(id);
    document.getElementById(id).checked = true;
    toggleGeoXML(id, true);
    userAdded++;
  }
}
 
function addTR(id) {
  var layerTR = document.createElement("tr");
  
  var inputTD = document.createElement("td");
  var input = document.createElement("input");
  
  //Add Legend to sidebar -  display marker icons
  var image = document.createElement("img");
  image.src = layers[id].image;
  
  input.type = "checkbox";
  input.id = id;
  input.onclick = function () { toggleGeoXML(this.id, this.checked) };
  inputTD.appendChild(input);
 
  var nameTD = document.createElement("td");
  var nameTD2 = document.createElement("td");
  
  var nameA = document.createElement("a");
  //nameA.href = layers[id].url;
  var name = document.createTextNode(layers[id].name);
  nameA.appendChild(name);
  nameTD.appendChild(nameA);
  nameTD2.appendChild(image);
 
  layerTR.appendChild(inputTD);
  layerTR.appendChild(nameTD);
  layerTR.appendChild(nameTD2)
  document.getElementById("sidebarTBODY").appendChild(layerTR);
}

Open in new window

0
 
husker475Commented:
Try:
var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": 'Tasks - <img src="myImage.ext">' }
};

Open in new window

0
 
a0k0a7Author Commented:
it didn't work for me...
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
David S.Commented:
If that didn't work, we'll need to see more of your code to be able to help you.
0
 
AFUEGOCommented:
here is....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Custom</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key="
      type="text/javascript"></script>
 
    <LINK href="menu.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    body {
      font-family: Arial, sans serif;
      font-size: 11px;
    }
    </style>
    <script type="text/javascript" src="menu.js"></script>
    <script type="text/javascript"> 
var map;
var userAdded = 1;
    var centreLat=0.0;
    var centreLon=0.0;
    var initialZoom=1;
 
var layers = {
 "activities": 
 {"url": "http://google.com",
  "name": "Activities"}  ,
 "tasks": 
 {"url": "http://google.com",
  "name": "Tasks" }
};
 
function customGetTileURL(a,b) {
      //converts tile x,y into keyhole string
 
      var c=Math.pow(2,b);
 
        var d=a.x;
        var e=a.y;
        var f="t";
        for(var g=0;g<b;g++){
            c=c/2;
            if(e<c){
                if(d<c){f+="q"}
                else{f+="r";d-=c}
            }
            else{
                if(d<c){f+="t";e-=c}
                else{f+="s";d-=c;e-=c}
            }
        }
        return "portal/"+f+".jpg"
    }
 
    function getWindowHeight() {
        if (window.self&&self.innerHeight) {
            return self.innerHeight;
        }
        if (document.documentElement&&document.documentElement.clientHeight) {
            return document.documentElement.clientHeight;
        }
        return 0;
    }
 
    function getWindowWidth() {
        if (window.self&&self.innerWidth) {
            return self.innerWidth;
        }
        if (document.documentElement&&document.documentElement.clientWidth) {
            return document.documentElement.clientWidth;
        }
        return 0;
    }
 
    function resizeMapDiv() {
        //Resize the height of the div containing the map.
        //Do not call any map methods here as the resize is called before the map is created.
    	var d=document.getElementById("map");
    	var e=document.getElementById("sidebar");
        var offsetTop=0;
        for (var elem=d; elem!=null; elem=elem.offsetParent) {
            offsetTop+=elem.offsetTop;
        }
        var height=getWindowHeight()-offsetTop-16;
        if (height>=0) {
            d.style.height=height+"px";
            e.style.height=height+"px";
        }
        var width=getWindowWidth()-offsetTop-16-150;
        if (width>=0) {
            d.style.width=width+"px";
        }
    }
 
 
 
function onLoad() {
  //map = new GMap2(document.getElementById("map")); 
 
  //map.setCenter(new GLatLng(37.422341, -122.085018), 5);
  //map.addControl(new GSmallMapControl());
 
        resizeMapDiv();
        var copyright = new GCopyright(1,
                              new GLatLngBounds(new GLatLng(-90, -180),
                                                new GLatLng(90, 180)),
                              0,
                              "<a href=\"https://google.com\">G-Fuck</a>");
        var copyrightCollection = new GCopyrightCollection("(c) Company, 2008");
        copyrightCollection.addCopyright(copyright);
 
        //create a custom picture layer
        var pic_tileLayers = [ new GTileLayer(copyrightCollection , 0, 17)];
        pic_tileLayers[0].getTileUrl = customGetTileURL;
        pic_tileLayers[0].isPng = function() { return false; };
        pic_tileLayers[0].getOpacity = function() { return 1.0; };
        var pic_customMap = new GMapType(pic_tileLayers, new GMercatorProjection(6), "Pic",
            {maxResolution:5, minResolution:0, errorMessage:"Data not available"});
            
        pic_customMap.getProjection().tileCheckRange = function(a, b, c){
                var d = Math.pow(2,b); 
                if (a.y < 0 || a.y >= d)
                        return false;
                if (a.x < 0 || a.x >= d)
                        return false;
                return true
        }
        
        pic_customMap.getProjection().getWrapWidth = function() {
                return 1024 * 1024 * 1024;
        }
 
        //Now create the custom map. Would normally be G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP
        map = new GMap2(document.getElementById("map"),{mapTypes:[pic_customMap]});
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());
        map.enableDoubleClickZoom();
	map.enableContinuousZoom();
	map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(centreLat, centreLon), initialZoom, pic_customMap);
 
  //document.getElementById("url").value = "http://";
      new ContextMenu(map);
  
  for(var layer in layers) {
    addTR(layer, layers[layer].name);
    document.getElementById(layer).checked = true;
    toggleGeoXML(layer, true);
    }
} 
 
 
 
function addGeoXML() {
  var theUrl = document.getElementById("url").value;
  theUrl = theUrl.replace(/^\s+/, "");
  theUrl = theUrl.replace(/\s+$/, "");
  if (theUrl.indexOf(' ') != -1) {
    alert('Error - that address has a space in it');
  } else {
    var id = "userAdded" + userAdded;
    layers[id] = {};
    layers[id].url = theUrl;
    layers[id].name = "User Layer " + userAdded;
 
    addTR(id);
    document.getElementById(id).checked = true;
    toggleGeoXML(id, true);
    userAdded++;
  }
}
 
function addTR(id) {
  var layerTR = document.createElement("tr");
 
  var inputTD = document.createElement("td");
  var input = document.createElement("input");
  input.type = "checkbox";
  input.id = id;
  input.onclick = function () { toggleGeoXML(this.id, this.checked) };
  inputTD.appendChild(input);
 
  var nameTD = document.createElement("td");
  var nameA = document.createElement("a");
  //nameA.href = layers[id].url;
  var name = document.createTextNode(layers[id].name);
  nameA.appendChild(name);
  nameTD.appendChild(nameA);
 
  layerTR.appendChild(inputTD);
  layerTR.appendChild(nameTD);
  document.getElementById("sidebarTBODY").appendChild(layerTR);
}
 
function notzoomToGeoXML(geoXml) {
  var center = geoXml.getDefaultCenter();
  var span = geoXml.getDefaultSpan();
  var sw = new GLatLng(center.lat() - span.lat() / 2,
                       center.lng() - span.lng() / 2);
  var ne = new GLatLng(center.lat() + span.lat() / 2,
                       center.lng() + span.lng() / 2);
  var bounds = new GLatLngBounds(sw, ne);
  map.setCenter(center);
  map.setZoom(map.getBoundsZoomLevel(bounds));
}
 
function toggleGeoXML(id, checked) {
  if (checked) {
    var geoXml = new GGeoXml(layers[id].url);
    GEvent.addListener(geoXml, 'load', function() {
      if (geoXml.loadedCorrectly()) {
        //geoXml.gotoDefaultViewport(map);
        layers[id].geoxml = geoXml;
        document.getElementById("status").innerHTML = "";
      }
    });
    layers[id].geoXml = geoXml;
    map.addOverlay(layers[id].geoXml);
    document.getElementById("status").innerHTML = "Loading...";
  
  } else if (layers[id].geoXml) {
    map.removeOverlay(layers[id].geoXml);
  }
}
 
  </script>
 
</head>
<body onload="onLoad()" onresize="resizeMapDiv()" onunload="GUnload()">
    <br/>
    <div id="map" style="width: 800px; height: 600px; float:left; border: 1px solid black;"></div>
    <div id="sidebar" style="float:left; overflow-vertical:scroll; height: 600px; width:150px; border:1px solid black">
    <div style="font-size: 14px;"><br/>&nbsp;Available:</div>
    <table id="sidebarTABLE">
    <tbody id="sidebarTBODY">
    </tbody>
    </table>
    <div id="status" style="text-align:center; color: #ff0000"></div>
    <div style="font-family: Arial, sans serif; font-size: 14px;"><br/><br/>&nbsp;Add to map:</div>    
    &nbsp;<input id="url" value="http://"/>
    &nbsp;<input type="button" value="Add" onClick="addGeoXML();"/>
    </div>
 
  </body>
</html>
 
      

Open in new window

0
 
a0k0a7Author Commented:
What I would like to do it is to add an image icon to next to the layer definition.

It currently have ID and Name, I am not sure if I have to extend the function addTR()....


 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.