Question

so I am trying to create a link within my page but for some reason it is getting disjointed the code is

data = data + "<li><a href='#' onclick='History.pushState({state:null},'article,"+rtndata[j].id+"','article'); return false;'>" + rtndata[j].title + "</a></li>";

rtndata[j].id is an id number and rtndata[j].title is a title both are being pulled from a db but when it renders in the browser it becomes

<a false;'="" return="" article,41','article');="" onclick="History.pushState({state:null}," href="#">Newsflash 5</a>

so what I to render is actually

<a href="#" onclick="History.pushState({state:null},'article,41','article'); return false;'>"Newsflash 5</a>;

Can anyone help me?

Answer 1

The value of the onclick attribute is enclosed within single quotes. Because of this, you have to either use " or " (only for values) if you have to use quotes inside the attribute.

Because your JavaScript string is enclosed within double quotes ("), the double quotes have to be escaped before they can be used: "....onclick='...\"....'....";.

To fix your code, I have decided to use double quotes (escaped) instead of single quotes:

data = data + "<li><a href='#' onclick=\"History.pushState({state:null},'article,"+rtndata[j].id+"','article'); return false;\">" + rtndata[j].title + "</a></li>";

Detailled table:

JS string marker     Attribute marker       Valid attribute value markers
      "                \"                   '    "
      "                '                    \"   "
      '                "                    \'   "
      '                \'                   "    "