Add quote in javascript generated links

Question

Hi,

How do i fix this link in javascript.

<a href="javascript:clientGalleryLink(Business)">Link</a>

Its missing single quotes around 'Business'

Javascript:

html += "<option value='javascript:clientGalleryLink(" + titleArray[x] + ")'>" + titleArray[x] + "</option>";

Answer 1

\"" + titleArray[x] + "\"

Answer 2

Try this to escape the attribute quotes and thus giving you the single inner quotes like you show in your example.

html += "<option value=\"javascript:clientGalleryLink('" + titleArray[x] + "')\">" + titleArray[x] + "</option>";

Answer 3

use \ to escape the quotes

html += "<option value='javascript:clientGalleryLink(\"" + titleArray[x] + "\")'>" + titleArray[x] + "</option>";

Answer 4

<a href='javascript:clientGalleryLink("Business")'>Link</a>
html += "<option value='javascript:clientGalleryLink(\"" + titleArray[x] + "\")'>" + titleArray[x] + "</option>";

Could you please try this one out.

Thanks.

Answer 5

Escaping problems like this is why it's best to avoid creating JavaScript-in-HTML dynamically in strings. The javascript: pseudo-URL scheme should also never be used.

Instead, consider an ‘unobtrusive scripting’ approach: move the data out of an embedded JS string and into normal attributes, such as class or, if the link corresponds to a particular element on the page, the href itself:

<a class="gallerylink" href="#Business">Link</a>

for (var i= document.links.length; i-->0;) {
    if (document.links[i].className==='gallerylink') {
        document.links[i].onclick= function() {
            clientGalleryLink(this.hash.substring(1));
            return false;
        };
    }
}

The second example:

html += "<option value='javascript:clientGalleryLink(" + titleArray[x] + ")'>" + titleArray[x] + "</option>";

is just a mess. Aside from the lack of \' quoting around the titleArray value, and the lack of HTML-escaping or JS-string-literal-escaping on the titleArrays (so if you have '"<& characters in the title you've got problems).

Are you expecting the script to get executed when the option is chosen just because you've put it in the value? It won't.

Better to use the DOM objects than trying to mess around inserting JavaScript inside HTML inside JavaScript inside HTML. For example, if you're looking for a select box that calls clientGalleryLink every time the selected option is changed:

<div id="PlaceWhereYouWantToPutTheSelectBox"></div>

<script type="text/javascript">
    var s= document.createElement('select');
    for (var i= 0; i<titleArray.length; i++) {
        s.options[i]= new Option(titleArray[i], titleArray[i]);
    }
    s.onchange= function() {
        clientGalleryLink(this.options[this.selectedIndex].value);
    };
    document.getElementById('PlaceWhereYouWantToPutTheSelectBox').appendChild(s);
</script>

No ugly escaping necessary, no cross-site-scripting security holes.