Html and javascript code Concatenation problem

Question

I am trying to append HTML syntax with javascript and onClick trying to pass a function with 2 parameters. But while passing the parameters I am doing something wrong in concatenation. Please help.Here is the append code.

addPanelHtml += "<li><a href='#' id='btnhistory" + i+ "' onclick='histDrpDwnEdt("+chkval+"','" + i+ ")'>History Parameters</a></li>";

while running the program I am getting error:

Uncaught SyntaxError: Unexpected end of input

Try, addPanelHtml += "<li><a href='#' id='btnhistory" + i + "'" + " onclick='histDrpDwnEdt("+chkval+"','" + i+ ")'>History Parameters</a></li>"; — Engincan Veske
– Engincan Veske, Commented Dec 10, 2020 at 9:05
what is your addPanelHtml ? Can you provide more of your code please? — KienHT
– KienHT, Commented Dec 10, 2020 at 9:11
I think your error is here: onclick='histDrpDwnEdt("+chkval+"','" + i+ ") you should remove the single quote signs around the comma (if both chhval and i are numeric values): onclick='histDrpDwnEdt("+chkval+"," + i+ ") or you should add one before chval and one afer i (if they are string values): onclick='histDrpDwnEdt('"+chkval+"','" + i+ "'). — secan
– secan, Commented Dec 10, 2020 at 9:40
... actually, if chhval and i are string values, you should add the single quote signs and escape them: onclick='histDrpDwnEdt(\'"+chkval+"\',\'" +i+ "\') — secan
– secan, Commented Dec 10, 2020 at 9:56

Dani Madrid · Accepted Answer · 2020-12-10 09:20:58Z

2

Try instead of writting the ', try like this \':

addPanelHtml += "<li><a href=\'#\' id=\'btnhistory" + i+ "\' onclick=\'histDrpDwnEdt("+chkval+"\',\'" + i+ ")\'>History Parameters</a></li>";

answered Dec 10, 2020 at 9:20

Dani Madrid

213 bronze badges

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

Comments

Aalexander · Accepted Answer · 2021-02-08 13:06:37Z

0

I would highly recommend to use template strings in this use case

Here the solution with template strings

addPanelHtml += `<li><a href='#' id='btnhistory${i}' onclick='histDrpDwnEdt(${chkval}, ${i})'>History Parameters</a></li>`;

Then you can get rid of all these + " " + concatenations and just use ${} to enclose your variables.

This improves the readabilty of your code by far.

Here you can read more about template strings

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings

edited Feb 8, 2021 at 13:06

answered Dec 10, 2020 at 9:08

Aalexander

4,9843 gold badges14 silver badges37 bronze badges

2 Comments

secan Over a year ago

The suggestion is good but the string you provided is not correct; it should be

addPanelHtml += `<li><a href='#' id='btnhistory${i}' onclick='histDrpDwnEdt(${chkval}, ${i})'>History Parameters</a></li>`;

secan Over a year ago

@developerExecutive, actually that is called a template literal or a template string (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…), as correctly mentioned by Alex, while concat is a method of String.prototype (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) and it has not changed in ES6. ;)

AbsoluteBeginner · Accepted Answer · 2020-12-10 09:45:12Z

0

My suggestion:

var addPanelHtml = '', i = 0, chkval = 1;

addPanelHtml += '<li><a href="#" id="btnhistory' + i + '" onclick="histDrpDwnEdt(' + chkval + ', ' + i + ')">History Parameters</a></li>';

console.log(addPanelHtml);

answered Dec 10, 2020 at 9:45

AbsoluteBeginner

2,2833 gold badges15 silver badges24 bronze badges

Collectives™ on Stack Overflow

Html and javascript code Concatenation problem

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related