Search code examples
javascripthtmlleaflet

Uncaught SyntaxError: expected expression, got ';'


var popupContent = '<a href="#tableofresults" class="modal-trigger" onClick="stopno='+feature.properties.busstopcode+'; nuscode="'+feature.properties.nuscode+'";">Click me!</a>';

I'm currently using Leaflet and want a popup with clickable text, which will run some Javascript to define the variables stopno and nuscode. However, in the GeoJSON data feature.properties.nuscode is a string and not an integer, and thus I need to use quote marks to define the variable nuscode.

However, if I were to use quote marks again it would cause issues as I am using inline JS in the onclick property for the <a> tag, and using quote marks causes "Unexpected end of input" errors. How do I remedy this?


Solution

  • As of ES2015, you could use backticks to create what is known as template literals (template strings).

    You can encapsulate text in backticks and interpolate JavaScript so that your code is much neater. It also helps avoid any conflicting use of single/double quotation marks, and avoids having to escape (\) strings.

    More can be read about it here on MDN

    const popupContent = `<a href="#tableofresults" class="modal-trigger" onClick="stopno='${feature.properties.busstopcode}'" nuscode="${feature.properties.nuscode}">Click me!</a>`;