Develop Reference

Using a var in an <img src> tag

I've been trying to work out my own photo album when I encountered an error. It's a syntax error but after trying out a number of different ways of writing the code it just wont work.
Here's what I did. I made a var image which contains the string file path (using string manipulation) of the image (I am not to use PHP just yet, so it can only accept photos from a given folder named "images" on the base directory) and another var imgSource to contain the actual image itself using the var image.
The code is:
var image = "images/" + $(".inputImage").val().split('\\').pop();
var imgSource = $('<img src = image alt = "Image not found" class = "card-img-top">');
for some reason, even without the apostrophes, the tag reads the word image as the filepath (string) not as variable I've created.

You would use
var imgSource = $('<img src="' + image + '" alt="Image not found" class="card-img-top">');

var image = "images/" + $(".inputImage").val().split('\\').pop();
var imgSource = $('<img src="' + image + '" alt="Image not found" class="card-img-top">');

How to use a variable as a filepath in JS?

While trying to build some dynamic content for a webpage, I encountered a strange problem. I did some research but I could not find anything that would help me...
Here is my code where I try to change the background image of a div.
The file path for the background image is stored in an object which is received as JSON and parsed to a javascript object. When I fill the innerHTML of the div with the content of the filepath variable, the correct URL is displayed.
And when I write this exact URL into the backgroundImage URL, the correct picture is displayed.
However when I try to replace the file path with the variable, nothing happens.
var myObj = JSON.parse(this.responseText);
var URL = JSON.stringify(myObj.imageURL);
newbox.style.backgroundImage = "url('myObj.imageURL')";
newbox.innerHTML += myObj.Content;
newbox.innerHTML += myObj.imageURL;
insert.append(newbox);
In my code you can see that I also tried to stringify the value of myObj.imageURL and use this as the file path. But this did not work either.
EDIT: the filepath stored in myObj.imagURL looks like this: images/crew.jpg
EDIT 2: The problem has been solved by Manuel Otto:
newbox.style.backgroundImage = "url("+myObj.imageURL+")";
Thanks for all the advise!

Very close, you were ;)
newbox.style.backgroundImage = "url("+myObj.imageURL+")";

I think your string is wrong.
Use this:
newbox.style.backgroundImage = "url('" + myObj.imageURL + "')";

This is a fully working code.
var myObj = {
imageURL: "https://images.unsplash.com/photo-1494249465471-5655b7878482?ixlib=rb-0.3.5&s=997116405ede44d63ddc54f16e2db8ce&auto=format&fit=crop&w=1350&q=80",
Content: "my div content"
}
var URL = JSON.stringify(myObj.imageURL);
var insert = document.getElementById("insert");
var newbox = document.createElement("DIV");
newbox.style.backgroundImage = `url('${myObj.imageURL}')`;
newbox.style.height = "400px";
newbox.innerHTML += myObj.Content;
newbox.innerHTML += myObj.imageURL;
insert.append(newbox);
<div id="insert"></div>

Javascript query string not working on mobile

<script>// <![CDATA[
$(function(){
var currentPostUrl = window.location.href + "?ref=blogshare"
var currentPostTitle = $('.post-title').text().trim();
$('#myModal').appendTo("body")
var facebookShareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + currentPostUrl
var emailShareUrl = "mailto:?to=&body=Hey, I thought you might like this post. It's called " + currentPostTitle + ". You can read it here: " + currentPostUrl + "&subject=Thought you might like this post..."
$('.email-share').attr('href', emailShareUrl);
// ]]></script>
The goal of the above script is to get the current url and append a ref query string to it. Then we change the href of a link to add a custom mailto.
The above seems to work perfectly fine on desktop. But on mobile (chrome iphone), when I click the email-share link, the ?ref=blogshare is not being appended to the link.
Any ideas why?

You need to encode querystring values.
encodeURIComponent()
var currentPostUrl = encodeURIComponent(window.location.href + "?ref=blogshare");

Adding javascript variable to hyperlink within script

I have been trying to create a hyperlink using a variable defined earlier in the same function to append:
var NAMEVARIABLE = responseArray[i].Name;
var TITLE_Game = document.createElement("p");
TITLE_Game.className = "TITLE_Game";
TITLE_Game.innerHTML = "<a href='Game_NAMEVARIABLE.html'>Games</a>";
I have tried the following using the solution found here: Passing Javascript variable to <a href >
Games
But that didn't work. I then tried adding an ID:
<a id="link" href="Game_.html?propid=">Games</a>
And adding this to the script: document.links["link"].href += NAMEVARIABLE;
This didn't work either. These links are occuring within Isotope, which I've run into newbie-problems making sure my JSON data is loading before the script executes. That's all working now, but I'm not sure if the reason the above methods aren't working is because of a similar issue, or if they simply are not the proper way to go about this.
Any help is much appreciated. Thank you

first of all, try debug your variable :
var NAMEVARIABLE = responseArray[i].Name;
alert(NAMEVARIABLE);
is it returning the desired return value or not.
and then the second thing, in your first style of script, try this instead :
TITLE_Game.innerHTML = "<a href='Game_"+NAMEVARIABLE+".html'>Games</a>";
I assumed you have (static) html collection with game_[number_id].html format
and if it's so, you can try further with your second style of script, and change it to this :
Games
you need to learn further about javascript strings concatenation

Use string concatenation to build up your inner html string.
Example:
var nameVariable = 'Foo';
var innerHtmlText = nameVariable + 'bar';
$('#someElement').html(innerHtmlText);
The contents of someElement will then contain the text: 'Foobar';

You just need string concatenation. modify link's href onclick would be considered as spam in most modern browser.
<div id="result">
the result:
</div>
<script type="text/javascript">
var name = "foo_bar";
var url = "page.html?key=" + name; //or.. "page_" + name + ".html";
var link = 'link here';
$("#result").addClass("g_title");
$("#result").append(link);
</script>

This can be achieved by either (i.e. pure JS or jQuery) ways without much hassle. Suppose you have this <a> element with some href
<a id="Link" href="/collection/categories/">Games</a>
Pure JavaScript way:
window.onload = function() {
var link= document.getElementById('Link'),
url = link.href + responseArray[i].Name + '.html';
link.setAttribute('href', url);
}
Using Jquery:
$(function(){
var link= $('#Link'),
url = link.attr('href') + responseArray[i].Name + '.html';
link.attr('href', url);
});

XML parse to HTML with jQuery

I have some little problem with my scripts. I want to parse xml file with some data elements to my html file. So I try to use jQuery but it doesn't work. Can you help me?
This is my xlm file:
<?xml version="2.0"?>
<choices xml:lang="PL">
<complete>Wskazówka</complete>
<temperature>300 stopni celcjusza</temperature>
</choices>
This is my jQuery code:
$(document).ready(function () {
$.get('../data/content_data.xml', function(data) {
var complete = $(data).find('complete').text();
var temperature = $(data).find('temperature').text();
$('div.menu_circle').text(complete + "|" + temperature);
});
});

I haven't tried this myself, but maybe it helps:
http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery

The issue is how try to output your variables. Try to append your variables to your element.
$(complete + "|" + temperature).appendTo('div.menu_circle');