Develop Reference

Javascript var in string

So I have this code and would like to know how I could go ahead to put my javascript var into this string. I cannot seem to make a working code for myself.
For the image source i want picture.value to be in there. I have tried different solutions but have not managed to work it out myself. All help is greatly appreciated
var text = "<img src="">
I have currently been trying var text = "<img src=" + picture.value +">
but that doesn't seem to work for me.

You cannot use " & ' this together unless you escape it with a \.
var text = '<img src="' + picture.value + '">'
OR
var text = "<img src=\"" + "Hi" + "\">"

Try using ES6 new feature called Template literals (using quote). It is more cleaner and simpler.
var picture = {'value':'test-src-location'};
var text = `<img src="${ picture.value }">`;
console.log(text);

Assuming your picture.value is not empty.
var text = '<img src=' + picture.value + '>';
Example: https://jsfiddle.net/no293etL/

CSS Style not being applied in Javascript

If I have the following html added statically the CSS style is applied correctly
HTML:
<li class="connector">
<a href="#">
<img src="css/images/temp/connector2.png" alt="" width="192" height="192">
<span class="sr-only">box</span>
</a>
</li>
However if I do the following in Javascript to dynamically render the HTML the CSS does not seem to get applied.
JavaScript:
element.innerHTML += "<li class='connector'>" +
"<a href = '/connector/" + i + "'>" +
"<img src ='/" + i + "/background' />" +
"<span class='sr-only'>" + $.get("/" + i + "/getName") +"</span>" +
"</a>" +
"</li>";
The list shows, but without the CSS styling.
Any suggestions?

"<span class='sr-only'>" + $.get("/" + i + "/getName") +"</span>" +
get is asynchronous method. This addition is wrong.

The problem was with how I was using the Isotope Javascript library. The way I was adding the content was bypassing it.
After reading their documentation, I was able to get it to work properly.
I used the following instead
$.get("/connectorCount", function(data){
for (var i = 0; i < data; i++)
{
var $newItems = $('<li class="connector"> <img src = "/' + i + '/background" /> <span class="sr-only">' + $.get("/" + i + "/getName") + '</span></li>');
$('.connectors').isotope('insert', $newItems);
}
refreshSearch(data);
});

Dynamic added div with onclick link

I'm adding some amount of div based on the xml list which contain some data and url
Currently trying to use onClick but it doesn't seems right on the js that loads the div part.
//retrieve each of the data field from ITEM
var url = item.find('url').text();
var image = item.find('project-img').text();
var title = item.find('id').text();
var desc = item.find('desc').text();
var html;
//Embed them into HTML code
html = '<div class="project"><img src="' + image + '" alt="' + title + '" />';
html += '<div class="info">';
html += '<div class="title">'+title+'</div>';
html += '<div role="button" class="launch" onclick="window.open('+url+',"mywindow");">Launch Website</div>';
html += '<div role="button" class="more">View More</div>';
html += '</div></div>';
I think it somehow get mess up on the adding 'url' part with ' or "
Or there would be a much easier way to call a link on such situation?

as per your requirement correct syntax would be
html += '<div role="button" class="launch" onclick="window.open(\''+url+'\',\'mywindow\');">Launch Website</div>';

I think you have an error (the only one i could spot), so try the following:
onclick="window.open('+url+',\'mywindow\');"

Bind gridview using jquery : Have table data clickable

I have this part of code which is suppose to pass values from my dataset to a gridview.
var row = $("[id*=gvPlastic] tr:last-child").clone(true);
var codes = $(this).find("Code").text();
if ($(this).find("Stock").text() == 'Y') {
$("td", row).eq(7).html('<a href="#" onclick="getStock()" value=' + codes + ' />' + codes + '</a>');
}
else {
$("td", row).eq(7).html($(this).find("Stock").text());
}
How ever the variable code is outside the link i.e shown below:
<a value="80043" onclick="getStock()" href="#"></a>
80043
I am binding a gridview using jquery. My intention was the boundfield Stock be clickable if value is Y.

You are closing the anchor element in your code twice...
<a href="#" onclick="getStock()" value=' + codes + ' />' + codes + '</a>
Should be:
<a href="#" onclick="getStock()" value=' + codes + '>' + codes + '</a>
(note the removed "/" right before the anchor's greater-than character)

Building html tag with javascript

The scenario is the following:
I call the buldMyStuff function to build images many times the following way. Wrapping the img into an "a" tag is not an option.
function buildMyStuff(item){
var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';
return tag;
}
function doClick(type,data){
//do stuff
}
Lets assume that the item.type value is "type" and the item.data value is "data".
The problem with this that when I click the image it says type is not defined. Therefore (and I checked in the built html structure) the img eventually looks like this:
<img src="someimg.png" onclick="doClick(type,data)" />
What I need to achieve is:
<img src="someimg.png" onclick="doClick('type','data')" />
However as I am using the ' character to wrap the whole tag and the " character to wrap the attribute I cannot use anything else. Does someone know the solution for this?
Thank you in advance.

You can use '\' to escape special characters.
var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';
=>
var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />';

this is invalid;
var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';
It should be
var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />';

function buildMyStuff(item){
var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />';
return tag;
}