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/
Related
I have this javascript code. When it renders it shows quotes around the text of the link rather than just the text. What is the syntax to properly concatinate the link text? My quotes are messed up but I cannot figure it out.
var link = "<a id=\"myLink\" href=\"\" target=\"_blank\">\"" + text + "\"</a>";
Looks like you had extra quotes. You do not need to escape those around + text +. The following should work:
var link = "<a id=\"myLink\" href=\"\" target=\"_blank\">" + text + "</a>";
I prefer single quotes:
var link = '<a id="myLink" href="" target="_blank">' + text + '</a>';
When using the + operator to concatenate a variable and a string, you just have to keep track of opening and closing quotes. It can get tricky!
Similar example:
var str1 = "string";
var str2 = "This is how to concatenate a " + str1 + ".";
console.log(str2);
Do this
var link = "<a id=\"myLink\" href=\"\" target=\"_blank\">" + text + "</a>";
Do not escape the quote before '+ text +'
Check this code :
const text = 'My awesome link'
const link = "<a href='http://google.com' target='blank'>" + text + "</a>
console.log(link);
I would like to prettify this URL in the output, how can i do that?
var msg = beasts[loc.beast_id] + "! Left "+dateFormat(timeToDespawn, "MM:ss")+" Link " + " https://www.google.com/maps/dir/Current+Location/"+loc.latitude+","+loc.longitude+" ";
The word "Link" should directly link to this:
https://www.google.com/maps/dir/Current+Location/"+loc.latitude+","+loc.longitude+"
is this possible, and how?
Thanks in advance!
Assuming you want to output to HTML, you would create your link like this:
var msg = "<a href='https://www.google.com/maps/dir/Current+Location/" + String(loc.latitude) + "," + String(loc.longitude) + "'>Link</a>";
You would use this to output it to your HTML page:
$('#foo').html(msg);
Working jsFiddle.
I know my question might seem stupid but I am stuck with this bit of code and I struggle with Javascript.
I would like to be able to display inside my page some images from the text of some links.
It might appear twisted but this is exactly what I want to do :-)
This is what I have managed to sort out so far if that can give you an idea :
http://www.online-image-editor.com/styles/2013/images/example_image.png
http://images.math.cnrs.fr/IMG/png/section8-image.png
http://www.online-image-editor.com/styles/2013/images/example_image.png
var liens = document.getElementsByTagName('a'),
valeurs = [];
for (i = 0; i < liens.length; i += 1) {
if (liens[i].text) {
valeurs.push(liens[i].text);
document.body.innerHTML = "<img src='" + valeurs[i] + "'>";
}
}
Thank you!
Well, you're almost there. The most trivial fix for your code is to change this line:
document.body.innerHTML = "<img src='" + valeurs[i] + "'>";
into this:
document.body.innerHTML += "<img src='" + valeurs[i] + "'>";
This will append to innerHTML instead of overwritng it.
A slightly better solution would be to actually create DOM nodes instead of modifying innerHTML. So the above line could be replaced by:
var img = document.createElement('img');
img.src = valeurs[i];
document.body.appendChild(img);
You can check it out here
I'm trying to append information to my page from two different JavaScript arrays. It looks like this.
var i = 0;
var videoArr=["big long array"];
var descriptArr=["big long array"];
function appendVideo(i) {
var url = "http://i.ytimg.com/vi/" + videoArr[i] + "/mqdefault.jpg";
$("#history").append("<img src=\"" + url + "\" width=\"120\" height=\"68\" />**NEED TO PRINT descriptArr[i] HERE**<br />");
}
function loadHistory() {
while (i < '.$length.') {
appendVideo(i);
i = i + 1;
}
}
So the above code is appending all the elements from the videoArr no problem. The problem is the descriptArr is full of free text descriptions that I need to print beside each videoArr element. What's he best way to do this? I presume it's not document.write(descriptArr[i])...
Try this, as long as you are sure that descriptArr does not contain any HTML literals.
$("#history").append("<img src=\"" + url + "\" width=\"120\" height=\"68\" />" + descriptArr[i] + "<br />");
Not the best way, but just try something like this
$("#history").append("<img src=\"" + url + "\" width=\"120\" height=\"68\" />" + descriptArr[i] + "<br />");
Ive used this for achieving the same thing:
aDate = (document.getElementById("datepicker").value);
$('.daysContain').find('div').eq(dateArray.length-1).prepend(aDate + '<br>');
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.