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/

onerror Event didn`t work

I try create code which replace src image on another. I want to use function invalidUrl():
function invalidUrl() {
paint.src = randomvariable;
}
but this function isn`t running :<
var paint = '<img src="' + url + '"class="heightImg" onerror="invalidUrl()"/>' + '</br></br>' + description;
How to change src images if current picture doesn`t exist?

paint.src // undefined
this is because paint is of "string" type and strings have no "src" property.
You can use vanilla JavaScript to build your img element:
var paintedElement = document.createElement("img");
paintedElement.src = url;
paintedElement.class = "heightImg";
paintedElement.onerror = function invalidUrl() {
paint.src = randomvariable;
};
paintedElement.innerHTML = "</br></br>" + description;
// append where you need to append paintedElement

If you're willing to use jQuery, you can create an element:
var paintelement=$('<img src="' + url + '"class="heightImg"/>' + '</br></br>' + description);
paintelement.attr('src','wherever');
paintelement.appendTo('#somewhere');
paintelement.on('error',function(){paint.src = randomvariable;});

Get div content inside (javascript code) using jquery or any way [duplicate]

This question already has answers here:
How can get the text of a div tag using only javascript (no jQuery)
(4 answers)
Closed 6 years ago.
I trying to get the #email div content insdie my javascript code.
Example:
<div id="email">useremail#gmail.com</div>
I want to print email address here
document.write('<img src="' + get_gravatar('Email Here', 150) + '" />');
Thank you very much!

I would suggest to not use document.write.
If I understand you, using jquery:
(function($) //IIEF format
{
$(function() //wait for doc ready
{
var $img = $('<img></img>'); //create img tag using jquery
var email = $('#email').text().trim() //could also be .html() to get inner html
$img.attr('src', get_gravatar(email, 150) ) //add email to src attribute of img tag
$('body').append($img); //change 'body' with whatever you want to add it to; this will append the img tag into the document
}
})(jQuery);

First you will need to get the text and store it in a variable and then you can use that.
You can use the following:
var email = document.getElementById('email');
document.write('<img src="' + get_gravatar(email, 150) + '" />');

Use .innerHTML or .textContent in javascript of the div email
The innerHTML property sets or returns the HTML content (inner HTML)
of an element.
var emailId = document.getElementById('email').innerHTML;
document.write('<img src="' + get_gravatar(emailId, 150) + '" />');
or
textContent returns null if the element is a document, a document
type, or a notation. To grab all of the text and CDATA data for the
whole document, one could use document.documentElement.textContent.
var emailId = document.getElementById('email').textContent;
document.write('<img src="' + get_gravatar(emailId, 150) + '" />');

document.write('<img src="' + get_gravatar(document.getElementById("email").innerHTML, 150) + '" />');
JQuery
document.write('<img src="' + get_gravatar($("#email").val(), 150) + '" />');

Hope this helps You,
var mail = document.getElementById('email').innerHTML;
document.write('<img src="' + get_gravatar(mail, 150) + '" />');

Unable to show images in javascript

I am using javascript to show images .I have 5 images but unable to display them.My code is as follows:
function set()
{
var i;
for(i=1; i<=5; i++)
{
var image = "<img src=images/sl + i + />";
document.getElementById('slider').innerHTML = image;
}
}
setInterval("set()","500");
<div id="slider">
<img src="images/sl1.jpg" />
</div>

Change -
var image = "<img src=images/sl + i + />";
To -
var image = "<img src=images/sl" + i + "/>";
Also I believe you need to append image format in this too(jpg | png etc)
EDIT --
var image = "<img src=images/sl" + i +".jpg"+" style='width:500px;height:300px;' />";

You're always putting the same image right now, the one of end of loop. I can propose this code :
var i = 0;
function set(){
var image = "<img src=images/sl" + i + "/>";
document.getElementById('slider').innerHTML = image;
i = (i+1)%5;
}
setInterval(set, 500);
I fixed a few other bugs/problems. Never pass a string as first argument to setInterval, pass the name of the function or a function expression. And the second needed argument is a number, it doesn't make sense to pass a string literal.
But it would have been cleaner to define the img element in the HTML part of your code and just change the src property instead of the whole slide inner HTML. It would also tell to the browser to change the display only after the image has been loaded.

Assuming that the filenames of the images aresl1, sl2,..., sl5 , it should be
var image = "<img src=images/sl"+i+"/>";

Try this:
function set()
{
var i;
for(i=1; i<=5; i++)
{
var image = "<img src='images/sl" + i + "'/>";
document.getElementById('slider').innerHTML = image;
}
}
setInterval("set()","500");
<div id="slider">
<img src="images/sl1.jpg" />
</div>

Your ' i ' variable is part of your string, you need:
var image = "<img src=images/sl" + i + "/>";

How to add attributes to custom HTML key [img]/path/to/image.jpg[/img]?

I have an online text editor, very well made however it does not currently support images.
I have this at the moment and don't feel it to be a very good way of doing it.
var = txt = "some text here oh and here's my image! [img]linktoimage.jpg[/img]";
var = txt.replace(/[img]/g, '<img src="');
var = txt.replace(/[/img]/g, '" alt="" />');
return txt;
And how would I go about adding attributes?

I would use a replacement function, to replace the substring as a whole and to build the replacement string more easily:
txt = txt.replace(/\[img\](.*?)\[\/img\]/g, function(match, src) {
return '<img src="' + src + '" alt="" />';
});
For more information, have a look at the MDN documentation.