We Keep Coding

JS Events help - when changing a style property

I have a code here that i was supposed to make to change a style property, managed to make it work, but had to look up at the proper way to place the ', the " and the + .
document.getElementById('image').style.backgroundImage="url('" + element.src + "')";
I have no issue understanding how structurally this works, my only question resides on why of the extra ', extra " and extra + inside where you call for the element.src.
originally i did something like this, and it obviously didnt work, why did those ('" + and + "') make the code work...
any help is appreciated
cheers
document.getElementById('image').style.backgroundImage="url(' element.src ')";

Let's analyze everything from your first code segment and that should give you a better understanding:
document.getElementById('image').style.backgroundImage="url('" + element.src + "')";
document is a variable
getElementById is a function, with the string 'image' being a parameter for that function.
style is a property
backgroundImage is a property which must be and must take a string
"url('" is a string
element is a variable, an object in this case, with src being one of its properties.
"')" is a string
The + signs are used to concatenate the string formed from "url('", element.src and "')". In short you are saying, "make a string from "url('", element.src and "')" and assign that string to the property backgroundImage.
Whereas in this:
document.getElementById('image').style.backgroundImage="url(' element.src ')";
The browser has no idea that element.src is a variable and not part of the string, since you enclosed it int double quotes, signaling that everything between the quotes is a string.

element is a variable outside of a string literal, but inside a string literal it is just the word element.
const element = "Hello!";
const first = "start element end";
const second = "start " + element + " end";
console.log({first,second});

Inside of CSS, you have to put your URL inside of quotes or apostrophes, so that has to translate to the javascript as well.
When you call the DOM event it will do this:
Original tag:
<div src="http://example.com/image.png"></div>
after calling the javascript function:
<div style="background-image: url('http://example.com/image.png');" src="http://example.com/image.png"></div>
and because you need to have some sort of quotation in the URL syntax, you have to use a different kind of quotation, such as the '' in this case.
For more reference on the background image style, you can go here: https://www.w3schools.com/css/css_background_image.asp
but to completely answer your question, the + in there is used to say that you want to add something else there, such as another string or a variable.
More information on that here: https://www.w3schools.com/jsref/jsref_operators.asp (you have to scroll down a bit to the string operators section).

how do you insert a variable into a url

I am trying to insert a variable in a url link in javascript but it's not letting me do it, it keeps looking for a file...
here is the code:
var pic = element.src;
document.getElementById('image').style.backgroundImage='url(pic)'
question is how I can insert the variable into the url link..the pic is a link to a photo on a website.

I think the problem is that url(pic) is a string. Try string concatenation instead like:
document.getElementById('image').style.backgroundImage='url(' + pic + ')';

Try this:
document.getElementById('image').style.backgroundImage='url('+pic+')'
To concadenate variable in string, you need to use + in JavaScript.

You need to concatenate the url( and pic and )
document.getElementById('image').style.backgroundImage='url(' + pic + ')';

executing javascript inside href attribute of anchor tag

I checked a lot on Hrefs but couldn't get something related.
I am trying to do this in code behind which is actually a custom control class
writer.Write("<a href='javascript:document.location.href?" + filter.ParameterName + "=" + filter.QueryValue + "'>" + filter.UserVisibleValue + "</a>| ");
now this gets me something like this on hover of above anchor 'document.location.href?Test one=2013' and when i click it, this throws an obvious javascript error 'SyntaxError: missing : in conditional expression' because it takes it as a conditional operator and hence finds : missing.
I simply want that document.location.href (current url) should be calculated and the value put in where i use it.
I know that i may simply call a javascript function and inside that function i set the href but can i do it this way?

Try this:
writer.Write("<a href='javascript:window.location = document.location.href?" + filter.ParameterName + "=" + filter.QueryValue + "'>" + filter.UserVisibleValue + "</a>| ");
Note that you might have to escape values as needed otherwise JavaScript will become invalid. To prove that above approach works, you can copy-paste following simpler example in any HTML page and see it working:
bla

Create Regex from a string variable in javascript

var tags=["div","span","body"];
for (i=0; i<=tags.length; i++){
source = source.replace(/\&lt\;<tags[i]/i, '<span class="tags[i]"><tags[i]</span>');
}
Basically, I'm trying to put all the opening div,span and body tags around a span with a class set accordingly. But, I am having issues getting the variables inside there.
I can put lines and lines for each different tag but considering this function is called on every key press I want to keep the code as small and efficient as possible.
Or are there other alternatives? I mean it would be even better if something along these lines was possible:
source = source.replace(/\&lt\;<div|<span/i, '<span class="div|span"><div|span</span>');
But, it clearly does not get me anywhere.

You can construct your regex from a string using the RegExp object:
source = source.replace(new RegExp("\\&lt\\;<" + tags[i], "i"), '<span class="' + tags[i] + '"><' + tags[i] + '</span>');
But your idea for an alternative is also possible by capturing the tag and referencing it in the replacement:
source = source.replace(/\&lt\;<(div|span|body)/i, '<span class="$1"><$1</span>');

You can use regexes with | (equivalent of OR): () are used to get the matched elements (div, span or body), and you can get them with $1
source.replace(/<(div|span|body)/i,'<span class="$1"><$1></span>')

Trying to covert a variable into its value within a URL

I'm trying to insert a variable's value into a url, but it's not working; I'm just getting the variable not the value
'myid' and 'verif' are the variables and their values are integers.
This code inserts the url into a hidden field in a form
$('#return').val(http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=myid&packid=1&verif=verif&jcode=xxx111xxx);
How do I write the following url so the variables 'myid' and 'verif' are converted to their values?

Well you are missing quotes so your code would not work at all.
$('#return').val("http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=" + myid + "&packid=1&verif=" + verif + "&jcode=xxx111xxx");
You should probably use encodeURIComponent()

You need to quotes " " the strings and concat the variables +
Try
$('#return').val("http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid="+myid+"&packid=1&verif="+verif+"&jcode=xxx111xxx");

JavaScript does not support string interpolation. Try something like this.
myIdVal = encodeURIComponent(myId);
verifVal = encodeURIComponent(verif);
var url = "http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=" + myidVal + "&packid=1&verif=" + verifVal + "&jcode=xxx111xxx";
$('#return').val(url);

A simple string works for me:
given index = 2,
`a.setAttribute("href", "myDirectory/" + index + ".jpg");` links the anchor to
"myDirectory/2.jpg", ie. the file number is taken from variable index.
Not sure if the setAttribute tolerates multiple tokens in its second parameter, but generally, this works.