We Keep Coding

How to pass JavaScript arguments using inner HTML

I am new to JavaScript and I am currently stuck on an issue. Basically, I using an API to search for anime, get the html image, synopsis, and name and put them in a table. That works fine. What I am trying to do is add an onlick for each name in the table to perform a function using the name of the anime as an argument. I have tried using "\'", the escape character, and it didn't work. Here is my code for each row:
nameAndSynopsis.innerHTML = "<table style='border: 1px solid black'><tr><td style='color:blue' onclick='getEpisodes(\'" + anime_name + "\')'>" + anime_name + "</td></tr><br><br><br><tr><td>" + anime_synopsis + "</td></tr></table>";`
When I run my code, the console says Unexpected end of input and here are the results from the source tab when I use inspect on my web page
`getEpisodes(`
Any help would be greatly appreciated.

If you have to use quotes, here how you will do it:
var functionname = "getEpisodes('" + anime_name + "')";
nameAndSynopsis.innerHTML = '<table style="border: 1px solid black"><tr><td style="color:blue" onclick="' +functionname+ '">' + anime_name + '</td></tr><br><br><br><tr><td>' + anime_synopsis + '</td></tr></table>';
I have added functionname in separate line to simply it. It can be done in single line as well.
<div id="nameAndSynopsis"></div>
<script>
function getEpisodes(something) {
console.log("ok.........");
}
var nameAndSynopsis = document.getElementById("nameAndSynopsis");
var anime_name = "anime_name";
var anime_synopsis = "anime_synopsis";
var functionname = "getEpisodes('" + anime_name + "')";
nameAndSynopsis.innerHTML = '<table style="border: 1px solid black"><tr><td style="color:blue" onclick="' + functionname + '">' + anime_name + '</td></tr><br><br><br><tr><td>' + anime_synopsis + '</td></tr></table>';
</script>

Try using template literals instead of all the quotes like this.
nameAndSynopsis.innerHTML = `<table style='border: 1px solid black'><tr><td style='color:blue' onclick=getEpisodes(${anime_name})> ${anime_name} </td></tr><br><br><br><tr><td>${anime_synopsis}</td></tr></table>`

You are using single-quote around the attribute value onclick=' <-- '
Then you are escaping the single quote, so it comes out like this ..
onclick='getEpisodes('yourAnimeName')'
Which sets your onclick attribute to getEpisodes(
This may not make sense and you may be asking, how does it end up like that, didn't i just ESCAPE those quotes?
Well, yes and no, you escaped them in the current javascript context. But since that is then inserted into the DOM as html, the html parser won't see those single-quotes as being escaped.
Try using double-quotes instead.
onclick='getEpisodes(\""+anime_name+"\")'
or
onclick=\"getEpisodes('"+anime_name+"')\"

Your code is ending with an unkown string there, right at the end
</table>";` <---- remove this last string
It should be ending like this
</table>";

Trying to escape quotes in a href tag

I have the following line of code,
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");
I essentially want the "data.response.results[i].webUrl" to replace the url string, but I'm not quite sure how to escape the quotes properly.

You can escape quotes by replacing them with \"
or just use single quotes - '
So "<div><a href="url">" becomes
"<div><a href=\"url\">" or "<div><a href='url'>"

a single quote ' and a string concatenator +
$("#busdata").append("<div><a href='"+ data.response.results[i].webUrl +"'>" + data.response.results[i].webUrl + "</a></div>");

Your syntax is wrong. You need to escape quotes. Change your <a href="url"> to <a href=\"url\"> like this:
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");
Or if you feel that's a bit tough, you can exchange the quotes, ' for ":
$("#busdata").append('<div>' + data.response.results[i].webUrl + "</div>");
Else, if you are trying to add the URL from the response:
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");

if url is a variable
$("#busdata").append("<div><a href='" + url +"'>" + data.response.results[i].webUrl + "</a></div>");
and if you want to write by yourself
$("#busdata").append("<div><a href='url'>" + data.response.results[i].webUrl + "</a></div>");

You can store it in variable instead :
var url = data.response.results[i].webUrl;
$("#busdata").append("<div>" + url + "</div>");
Hope this helps.

Simply do it following my example:
var a = $('<a />', {
href: 'url here',
text: 'text here'
}); $('body').append(a);

You could do this :
$("#busdata").append("<div><a href='"+data.response.results[i].webUrl +"'>" + data.response.results[i].webUrl + "</a></div>");
Since you are using double quotes for the string to append, you can use single quotes around the variable in the href attribute and then add that variable.

This is most easily achieved by not building HTML by smashing strings together in the first place.
$("#busdata").append(
$("<div />").append(
$("<a />").attr("href", data.response.results[i].webUrl)
)
);

Escaping quotes is not necessary
$("#busdata")
.append("<div><a href="
+ data.response.results[i].webUrl
+ ">"
+ data.response.results[i].webUrl
+ "</a></div>"
);

How to form variable string with HTML and corresponding quotations

I'm building a string of text using HTML and variables from a JSON file. The issue is that the quotation marks from the HTML are conflicting with the quotations from the js expression - specifically when I'm trying to build a URL from a string of a URL partial + a json variable.
Here's my code. Any help?
output += '<li><span><a>' +
jobs[i].title +
'</a></span><span>' +
jobs[i].city +
'</span><span><a href='http://user.theresumator.com/apply/'' +
jobs[i].board_code +
'><button>More Info ›</button></a></span></li>';
}
My desired outcome is something like:
<li><span><a>Social Impact Strategist (Los Angeles or New York)</a></span><span></span><span><button>More Info ›</button></span></li>

Escape your quotes with \:
output += '<li><span><a>' +
jobs[i].title +
'</a></span><span>' +
jobs[i].city +
'</span><span><a href=\'http://user.theresumator.com/apply/' +
jobs[i].board_code +
'\'><button>More Info ›</button></a></span></li>';
}
or use double quotes ":
output += '<li><span><a>' +
jobs[i].title +
'</a></span><span>' +
jobs[i].city +
'</span><span><a href="http://user.theresumator.com/apply/' +
jobs[i].board_code +
'"><button>More Info ›</button></a></span></li>';
}
The 2nd one will match your desired outcome with double quotes perfectly.

Here's the working code! I broke it out on a separate line and add double quotes by themselves contained in single quote.
output += '<li><span><a>' +
jobs[i].title +
'</a></span><span>' +
jobs[i].city +
'</span><span><a href=' +
'"http://user.theresumator.com/apply/' +
jobs[i].board_code +
'"' +
'><button>More Info ›</button></a></span></li>';
}

Javascript to build HTML

this one may be simple but it has eluded me. I have Javascript code which builds elements in the DOM (using JSON from a server script). Some of the elements have "onclick" calls that I want to pass the ID variable to.
I cannot seem to get the onclick="downloadImg("' + d.data_id + '")" syntax right. What should it be. The code below does not work. Thanks.
temp_html = temp_html + '<img src="/link/to/img.png" onclick="downloadImg("' + d.data_id + '")">';

If you use the double quotations, you will close the previous one, so you create a conflict. So replace " with a single quotation + escape \' like this:
temp_html = temp_html + '<img src="/link/to/img.png" onclick="downloadImg(\'' + d.data_id + '\')">';

Your line should be:
temp_html = temp_html + '<img src="/link/to/img.png" onclick="downloadImg(\\"' + d.data_id + '\\")">';
You basically have many layers of quotes so the
double slash
creates a
\"
in the output that escapes the quote once it gets outputted to HTML

<img src="/link/to/img.png" onclick="downloadImg("' + d.data_id + '")">';
This will resolve to something like: <img src="/link/to/img.png" onclick="downloadImg("1")">
As you can see you have double quotes inside double quotes. Something like this should do it:
<img src="/link/to/img.png" onclick="downloadImg(\'' + d.data_id + '\')">

Change your double quotes to single quotes and escape them:
onclick="downloadImg(\'' + d.data_id + '\')"

issue with apostrophes and double quotes in Javascript

I'm having trouble adding in a variable into the following line of JavaScript:
row.insertCell(0).innerHTML = "<div onClick='Myfunction(" + Password + ");'></div>"
how do I add in the password variable I'm getting confused with apostrophes and double quotes
I think it needs to put the value in-between apostrophes but this clashes with what's already there?

Try this example:
var Password ='sample';
document.getElementById("id1").value= '<div onClick="Myfunction(\'' + Password + '\');"></div>';
alert(document.getElementById("id1").value);
This is called Escaping. Use backslash() for the character which you want to escape.

Try this: row.insertCell(0).innerHTML = "<div onClick=Myfunction('" + Password + "');></div>"

you can try escape quotes with backslashes like this
row.insertCell(0).innerHTML = "<div onClick='Myfunction(\"" + Password + "\");'></div>"