Link does not work in JavaScript

Question

Link works when it's set in HTML but not from JavaScript. The functions will change to another page. The JavaScript Link is shown properly with image and name but by clicking on the link I get that specific error saying "Syntax Error". Tried different inverted commas but it won't work, I'm quite clueless at the moment.

$("#readerList").append("<li><a href='#' onclick='getSpecificReader(" + val.name + ")' ><img src='" + val.image_url + "'>" + val.name + "</a></li>");

<li><a href="#" onclick="getReaderByType('Gate Reader')">Gate Readers<span class="ui-li-count">25</span></a></li>

score 6 · Answer 1 · answered Aug 07 '15 at 09:25

Don't try to build JavaScript by mashing together strings. Don't try to build HTML by mashing together strings. Definitely don't try to combine the two. You are just asking for a nightmare of nested escaping problems.

Use DOM. Build your elements. Bind your event handlers. Let jQuery and the native DOM functions handle all your escaping for you.

It is more verbose, but much more manageable.

function getSpecificReader (val) { alert(val); }

var val = {
    name: "foo",
    image_url: "https://ac3d197e9505f18c50e0-32b9f49f48b2c22be12b40ee79e2acc4.ssl.cf1.rackcdn.com/icon/logos_and_badges_thumbs_up/7x5uDqD4GBTrCSbXggZ-/58C79CAE-C3E6-4D6A-BAF5-A03631274FD7.png"
  };

var list_item = $("<li />");
var link = $("<a />",
  {
    href: "#", // A link to the top of the page? Use a button instead
  }).on('click', function(event) {
  // Beware of creating a closure here. http://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript
  getSpecificReader(val.name);
});
var image = $("<img />", {
  src: val.image_url,
  alt: "Images require an alt attribute"
});
var text = document.createTextNode(val.name);
link.append(image);
link.append(text);
list_item.append(link);
$("#readerList").append(list_item);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="readerList">

</ul>

This sounds reasonable, thanks. I'm going the shorter way this time (shame on me...) — Lyn, Aug 07 '15 at 09:38

score 1 · Accepted Answer · answered Aug 07 '15 at 09:22

1

Because it become getSpecificReader(Gate Reader)

You need to add quotes like this : getSpecificReader(\"" + val.name + "\")

Then getSpecificReader("Gate Reader") is valid

answered Aug 07 '15 at 09:22

Hacketo

4,978
4
19
34

Simple. That's it, thanks. Well that was annoying, I've just tried *getSpecificReader('" + val.name + "')* – Lyn Aug 07 '15 at 09:35

Pranav C Balan · Answer 3 · 2015-08-07T09:53:26.743

0

You need to wrap string parameter with ' or "

$("#readerList").append("<li><a href='#' onclick=\"getSpecificReader('" +  val.name + "')\" ><img src='" + val.image_url + "'>" + val.name + "</a></li>");
//                                                                 --^--             --^--

edited Aug 07 '15 at 09:53

answered Aug 07 '15 at 09:22

Pranav C Balan

113,687
23
165
188

score 0 · Answer 4 · answered Aug 07 '15 at 09:25

Create the element and add the event listener properly with jQuery

var $new_link = $("<li><a href='#'><img src='" + val.image_url + "'>" + val.name + "</a></li>");

$new_link.on('click', function(){
  getSpecificReader(val.name);
});

$("#readerList").append($new_link);

Link does not work in JavaScript

4 Answers4