How to pass strings with single quoatations in HTML onclick event

Question

I am having major trouble trying to fix a bug within my code. Basically I have this button that when clicked will send two parameters to a function. The first parameter is a TV show's ID and the second is the TV show's name. Now this works unless I click the button and it tries to send a TV show name like Grey's Anatomy due to the single quotation.

Is there any way I can make use of the js replace function with this?

The line of code that I am having trouble with is here:

<a onclick="watchedShow('${showArr[i].imdbID}','${showArr[i].Title}'" class="btn btn-primary" href="#"></a>

Where showArr is an array of show names such as Game of Thrones and Grey's Anatomy. The error I am getting is: SyntaxError: missing ) after argument list. This happens when showArr[i].Title is Grey's Anatomy which I believe is due to the single quotation in the string. Any help would be appreciate.

Thanks!

The rest of my code, if needed is here:

    var showArr = res.data.Search;
    var output = '';
    for(i = 0; i < showArr.length; i++) { //loops through the results and puts the show names in an array.
        output += `
      <div class="col-4">
        <div class="well text-center">
          <img src="${showArr[i].Poster}" alt="Image not found" onerror="this.src='image-not-found.gif';" height="450" width="350">
          <h5>${showArr[i].Title}</h5>
          <a onclick="setShowID('${showArr[i].imdbID}')" class="btn btn-primary" href="showdetails.html">Show Details</a>`;
if(sessionStorage.getItem('username')) {
  output +=`<a onclick="watchedShow('${showArr[i].imdbID}','${showArr[i].Title}'" class="btn btn-primary" href="#"></a>
        </div>
      </div>`;
}
else {
  output += ` </div>
      </div>`;
}
    }
    $('#shows').html(output);
}

Have you thought about putting the imdbID and show title into data attributes on the link, and then accessing those via the event parameter that would be passed to watchedShow? — Denno, Apr 22 '18 at 23:12
you will need to escape the single quote at TV show`s name. To escape single quote you can use: \' — Rodrigo Gomes, Apr 22 '18 at 23:19
Don't use inline onclick and use more modern unobtrusive event listeners instead. For jQuery (which it appears you are using) use `$(selector).on('click', handlerFunction)` — charlietfl, Apr 22 '18 at 23:27
You can use `encodeURIComponent()` function of JS and it's counterpart `decodeURIComponent()` to safely encode **other** crazy characters in your names. So they can be used as in your example. But beware! these functions are not really well designed. Your single quote will *still need to be handled*: [SO question with regex to remove '](https://stackoverflow.com/questions/10896807/javascript-encodeuricomponent-doesnt-encode-single-quotes) — Ludovit Mydla, Apr 22 '18 at 23:45

score 0 · Answer 1 · answered Apr 22 '18 at 23:30

I've removed the syntax error from your code and implemented basics here to show it working. Can you look at this and tell me what doesn't work? That way we can answer your question directly.

var showArr = [{Title:"test one"}, {Title:"test's with apostrophe'"}];
var output = '';
for (i = 0; i < showArr.length; i++) { //loops through the results and puts the show names in an array.
  output += `
      <div class="col-4">
        <div class="well text-center">
          <h3>${showArr[i].Title}</h3>
        </div>
      </div>`
}
$('#shows').html(output);

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

How to pass strings with single quoatations in HTML onclick event

1 Answers1