How an I fix nested quatation marks in JavaScript?

Question

My JavaScript is like this:

var contentItem = '<a onclick="ga('send', 'event', 'find-a-doctor', 'appointment', 'Appointment from Home');" class="waves-effect waves-dark">Make an Appointment</a>';

Quotation marks above seems wrong. How do I fix this?

By attaching the event listener using Javascript instead of an HTML attribute — CertainPerformance, Sep 25 '19 at 07:55
Not a good question, but see: https://stackoverflow.com/questions/52525674/double-nested-quotes — freedomn-m, Sep 25 '19 at 08:08
@freedomn-m There exist error `Uncaught ReferenceError: ga is not defined` — moses toh, Sep 25 '19 at 08:08

score 1 · Answer 1 · edited Sep 25 '19 at 08:04

1

You could use `` (backquotes or backticks), e.g.:

var contentItem = `<a onclick="ga('send', 'event', 'find-a-doctor', 'appointment', 'Appointment from Home');" class="waves-effect waves-dark">Make an Appointment</a>`;

edited Sep 25 '19 at 08:04

Yashwardhan Pauranik

5,370
5
42
65

answered Sep 25 '19 at 07:59

Alessio Cantarella

5,077
3
27
34

There exist error : `Uncaught ReferenceError: ga is not defined` – moses toh Sep 25 '19 at 08:05

Andy · Answer 2 · 2019-09-25T08:15:19.910

1

Inline JS will cause all kinds of issues. Instead you could adopt a modern approach and use an event listener:

// Create your item and add it to the page
var contentItem = '<a class="waves-effect waves-dark">Make an Appointment</a>';
document.body.insertAdjacentHTML('beforeend', contentItem);

// Cache the element you added and add an event listener to it
// that calls handleClick when clicked
const wavesEffect = document.querySelector('.waves-effect');
wavesEffect.addEventListener('click', handleClick, false);

// Now your call to `ga` is much cleaner
function handleClick(e) {
  console.log('send', 'event', 'find-a-doctor', 'appointment', 'Appointment from Home');
  // ga('send', 'event', 'find-a-doctor', 'appointment', 'Appointment from Home');
}

edited Sep 25 '19 at 08:15

answered Sep 25 '19 at 08:06

Andy

61,948
13
68
95

Uncaught ReferenceError: ga is not defined – moses toh Sep 25 '19 at 08:20
1

That means that you've defined `ga` out of scope, which is a separate issue. The code itself is now working. – Rory McCrossan Sep 25 '19 at 08:21

score 0 · Answer 3 · edited Sep 25 '19 at 08:19

0

You can try following code.

var contentItem = '<a onclick="ga(\'send\', \'event\', \'find-a-doctor\', \'appointment\', \'Appointment from Home\');" class="waves-effect waves-dark">Make an Appointment</a>';

edited Sep 25 '19 at 08:19

Rory McCrossan

331,213
40
305
339

answered Sep 25 '19 at 08:11

James

9
1

How an I fix nested quatation marks in JavaScript?

3 Answers3