Syntax error in scripting HTML using javascript

Question

I have the following javascript code that attempts to insert HTML code dynamically. I have an error the syntax but I do not know how to correct it. Please can someone advise?

 loadNextContainer.innerHTML = '<span class="sr_43" id="srloadnext_2" onclick="srt.loadNextMatchRecords(\''+numDownloadSoFar+'\', \''+maxDownloadLimit+'\', \''+folderName+'\', \''+jsonHashTags+'\', \''+fromDate+'\', \''+toDate+'\', \''+lastScanId+'\')">LoadNext</span>';

ERROR MESSAGE:

 Uncaught SyntaxError: Invalid or unexpected token

I believe the error revovles around the function variables. In particular the JSON variable. I cannot change the use of double quotation marks for each element in the JSON. So that has to stay in any solution.

well you can always use template literal expression in such cases to avoid syntax issues — Muhammad Usman
– Muhammad Usman, Commented Aug 11, 2018 at 23:07
When you are concatenating your strings + variables, you are using single quotes that are opening the string unexpectedly. For example, look at just this piece: jsonHashTags+'\', \''+fromDate. You have single quotes inside your single quotes. — xhocquet
– xhocquet, Commented Aug 11, 2018 at 23:10
@xHocquet Appreciate the reply. But it would really help if you could re-write the line of code in above with the correct syntax. I would be able to better understand. — jamesMcKey
– jamesMcKey, Commented Aug 11, 2018 at 23:13

Tanner Babcock · Accepted Answer · 2018-08-11 23:24:31Z

2

You could try it using backticks like this.

loadNextContainer.innerHTML = `<span class="sr_43" id="srloadnext_2" onclick="srt.loadNextMatchRecords('`+numDownloadSoFar+`', '`+maxDownloadLimit+`', '`+folderName+`', '`+jsonHashTags+`', '`+fromDate+`', '`+toDate+`', '`+lastScanId+`')">LoadNext</span>';

Or just escape the double-quotes instead of the single quotes. The way you're doing it, you're unintentionally opening up the string when you try to escape it.

loadNextContainer.innerHTML = "<span class=\"sr_43\" id=\"srloadnext_2\" onclick=\"srt.loadNextMatchRecords('"+numDownloadSoFar+"', '"+maxDownloadLimit+"', '"+folderName+"', '"+jsonHashTags+"', '"+fromDate+"', '"+toDate+"', '"+lastScanId+"')\">LoadNext</span>";

answered Aug 11, 2018 at 23:24

Tanner Babcock

3,3706 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David784 Over a year ago

If you look at the image in his question, one of his parameters is an array. Template literal won't help with that, not without him doing a JSON.stringify or something.

David784 · Accepted Answer · 2018-08-11 23:37:20Z

0

Judging from your image of your variables, none of the template literal solutions are going to help you, because at least one of your parameters is an array.

Yes, it would be possible, with enough effort, to convert that array into a string representation that would work with innerHTML. But it's going to be very difficult. You'd end up needing to use JSON.stringify to get the string version of your array at least.

An easier solution is actually going to be to create the element and then add the onclick operator through pure javascript, like this:

var s = document.createElement('span');
s.className = 'sr_43';
s.id = 'srloadnext_2';
s.innerText = 'LoadNext';
loadNextContainer.appendChild(s);
s.onclick = function(e) {
  srt.loadNextMatchRecords(numDownloadSoFar, maxDownloadLimit, folderName, jsonHashTags, fromDate, toDate, lastScanId);
};

edited Aug 11, 2018 at 23:37

answered Aug 11, 2018 at 23:30

David784

7,5243 gold badges24 silver badges35 bronze badges

2 Comments

jamesMcKey Over a year ago

I used your code above but it failed to incorporate the onclick attribute in the span element? I even tried placing the s.onclick line before adding loadNextContainer.appendChild(s);.

David784 Over a year ago

I can't imagine why it wouldn't be attaching the listener; perhaps it's a javascript error rather than a failure to attach? Have you checked the browser console for errors?

Favnyr · Accepted Answer · 2018-08-11 23:27:56Z

0

Try it with template literals:

loadNextContainer.innerHTML = `<span class="sr_43" id="srloadnext_2" onclick="srt.loadNextMatchRecords(\'${numDownloadSoFar}\', \'${maxDownloadLimit}\', \'${folderName}\', \'${jsonHashTags}\', \'${fromDate}\', \'${toDate}\', \'${lastScanId}\')">LoadNext</span>`;

Edit: As others already mentioned. Sorry.

answered Aug 11, 2018 at 23:27

Favnyr

3532 silver badges11 bronze badges

Collectives™ on Stack Overflow

Syntax error in scripting HTML using javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related