We Keep Coding

Calling a method while setting innerHTML of an element

I am struggling with calling a method while setting innerHTML.
I apologize if there is a straightforward answer I have overlooked, but at the moment I am stuck.
Se the code below:
"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"
You can see that there's a mess regarding the quotes.
Is there a third way to type quotes or something of the kind that can allow me to call "removeEntry(element.id)"? I need quotes around element.id in order to call removeEntry. Any suggestions on how to solve this in a different way?

You should replace
"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"
with
"<a href='#' onclick='removeEntry(\"" + element.id + "\")'><span class='fa fa-times'></span></a>"
In fact, the problem is with you current code, the a tag onclick property will be looking like onclick='removeEntry('myId')'
Note there's imbricated simple quotes, breaking your function call. Replace the id simple quotes by escaped double quotes , and it'll give you onclick='removeEntry("myId")' that is fine :)
Edit : Anyway, if you're targeting recent browser, you could try ES6 template literals, that will give you the following line :
var html = `<span class="fa fa-times"></span>`;
This helps to avoid struggling with your quotes. Note that the variable inclusion in the template literal looks like PHP do.

This:
"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"
will create an element like this:
<a href='#' onclick='removeEntry('someId')'><span class='fa fa-times'></span></a>
Which is not correct. What you need to do is to either:
Use the other quotes " (but you have to escape them):
like this:
"<a href='#' onclick='removeEntry(\"" + element.id + "\")'><span class='fa fa-times'></span></a>"
to create an element like this:
<a href='#' onclick='removeEntry("someId")'><span class='fa fa-times'></span></a>
Or Add a backslash \ to the ' quotes (you have to escape the backslashes as well):
like this:
"<a href='#' onclick='removeEntry(\\'" + element.id + "\\')'><span class='fa fa-times'></span></a>"
to create an element like this:
<a href='#' onclick='removeEntry(\'someId\')'><span class='fa fa-times'></span></a>

'<a href="#" onclick="removeEntry(' + element.id + ')">
<span class="fa fa-times"></span>
</a>'
This should work out. You can encode double quotes in single quotes and you want this whole expression as a string.so a string with variable can be written as
string1 = string2 + variable +string3;
Or for a multi lines string in JavaScript you can use back ticks.
`<a href="#" onclick="removeEntry(' + element.id + ')">
<span class="fa fa-times"></span>
</a>`

dynamically insert href url and onclick event

i have the following code.
<a href="http://url.com" onclick="trackOutboundLink('http://url.com'); return false;">
i simply need to dynamically insert same link as href url and onclick event.
i tried the following but the onclick event didnt work.
<script type="text/javascript">
var url= "https://www.url.com";
document.write('<a href="' + endurl2+ '" target="_top" onclick="trackOutboundLink(' + endurl2+ '); return false;">');
</script>

You have mistyped some quotes. Try:
var url= "https://www.url.com";
document.write('Test');

You can just track whenever a link is clicked and find out the URL from the JS. E.g.
$('body').on('click','a',function(e){
trackOutboundLink($(this).attr('href'));
})

How to display a div inside colorbox - Jquery Plugin

I want to display a div inside Colorbox plugin, but it is not working as there are many double quotes inside the div element and is causing problems so how can I do it.
Here is my code
<script>
$(document).ready(function() {
if(localStorage.getItem('welcomehelloState') != 'shown'){
function openColorBox(){
$.colorbox({transition: "fade", top: "2%", width:"67%", height:"17%", html: "<section class="related">
<p>New Content:-</p>
<a href="/part-2/index>
<img src="img/related/Prdha.png" />
<h3>Art</h3>
</a>
<a href="/part-2/index6">
<img src="img/related/Kavi.png" />
<h3>Games</h3>
</a>
</section>"});
}
setTimeout(openColorBox, 100);
localStorage.setItem('welcomehelloState','shown')
};});
</script>
As you can see there are many double quotes and the brackets are not syncing.

The problem is that when you start a string with a double-quote (") and you place an other quote in the string, JS thinks you ended the string. Thats why the quotes which have to be in the string, have to be escaped: \"
Example: var x = "En then he said: \"Hi there\", with a big smile";
Also, JS does not like linebreaks. you have to escape these too if you need it badly, but the better way is to break the string into multiple strings
Example:
var x = "this is" +
"A multiline" +
"String.";
Your code, escaped well, has to be this:
<script>
$(document).ready(function() {
if(localStorage.getItem('welcomehelloState') != 'shown'){
function openColorBox(){
$.colorbox({transition: "fade", top: "2%", width:"67%", height:"17%", html: "<section class=\"related\">" +
"<p>New Content:-</p>" +
"<a href=\"/part-2/index\">" +
"<img src=\"img/related/Prdha.png\" />" +
"<h3>Art</h3>" +
"</a>" +
"<a href=\"/part-2/index6\">" +
"<img src=\"img/related/Kavi.png\" />" +
"<h3>Games</h3>" +
"</a>" +
"</section>"});
}
setTimeout(openColorBox, 100);
localStorage.setItem('welcomehelloState','shown')
}
});
</script>

If you are using Jquery and making html then make sure there is no enter in lines as jquery won't accept this and it will create an syntax error. use your code in this way..
$.colorbox({transition: "fade", top: "2%", width:"67%", height:"17%", html: '<section class="related"><p>New Content:-</p><img src="img/related/Prdha.png" /><h3>Art</h3><img src="img/related/Kavi.png" /><h3>Games</h3></section>'});
Thank you :)

How to escape single or double quote in JavaScript?

I am trying to replace quote (') with \' so as to escape escape quote or double quote in string
<ul id="list">
</ul>
<button id="sethrefbtn" onclick="setlink();">Set Link</button>
function setlink(){
var data = {
playerID : 102458,
playername: "Real Madrid's cristiano Ronalado"
}
listring= "<li><a href='SearchServlet?q=" + data.playername.replace(/'/g, "\'"); + "&playerid=" + data.playerID + "&page=1#pg0'>"+ data.playername +"</a></li>";
$("#list").append(listring);
}
Here is fiddle: fiddle
The desired output should be:
Real Madrid's cristiano Ronalado

Your problem is being caused by it being in an HTML attribute (so you need to convert it to an HTML character reference and not escape it). You should deal with that by using DOM instead of string mashing to build your HTML.
However, in this particular case, you are putting it in a URL, so you should be escaping it for URLs first.
You can do that with encodeURIComponent, but since you are building an entire query string and are using jQuery, you can use param instead.
function setlink() {
var data = {
playerid: 102458,
q: "Real Madrid's cristiano Ronalado",
page: 1
}
var url = "SearchServlet?" + $.param(data);
var li = $("<li />").append(
$("<a />").text(data.q).attr('href', url)
);
$("#list").append(li);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
</ul>
<button id="sethrefbtn" onclick="setlink();">Set Link</button>

listring= "<li><a href='SearchServlet?q=" + data.playername.replace(/'/g, "\'") + "&playerid=" + data.playerID + "&page=1#pg0'>"+ data.playername +"</a></li>";
Just replace the above statement in the code .
There is a semicolon in the middle of the statement in your code.

Make a hyper link on Html link with Jquery

I have Html contents like
<span>
http://j.mp/eUcRNK
</span>
I want to hyperlink on above html text like this
<span>
<a href="http://j.mp/eUcRNK" class="link" target="_blank">
http://j.mp/eUcRNK
</a>
</span>
How I can do that..

$('span').html(function(i,txt){
return $('<a>').text(txt).attr({'target':'_blank', 'href': txt }).addClass('link');
});
demo
based on the comments below, I guess this solves it.
$('span').html(function(i,txt){
return replaceURLWithHTMLLinks(txt);
});
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a class='link' href='$1' target='_blank' >$1</a>");
}
updated fiddle
for jquery 1.3.2, just change the jQuery codes a bit.
var span = $('span');
span.html(replaceURLWithHTMLLinks(span.html()));
another updated fiddle

Try
$("span").each(function(){
var text = $(this).text();
$(this).contents().wrap("<a class='link' href='" + text + "' target='_blank' />")
});