0

I'm making an interactive map by my own as a school project (I am a complete newbie in programming) with the help of https://youtu.be/5oQTvBwr1UM?t=812.

The problem here is that the pop up does not appear when I click the area. Is there something wrong with my .click(function()?

<svg version="1.1"
 id="svg4862" inkscape:output_extension=">
<path id="Louisiana" mytitle="Louisiana" class="st0"/>
</svg>

<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function()
{
    $('#svg4862').click(function()
    {
        var mytitle = $(this).attr('mytitle');
        alert(mytitle)
    });

});
</script>

I will really appreciate your help. I have no idea why it isn't working although I did exactly the same with youtube.

Eye Burning
  • 1
  • 2
  • 2
    You seem to be missing the start of the SVG tag. – Turnip Mar 11 '19 at 14:48
  • @Turnip Thanks! I changed it and the pop up is now saying "undefined" instead of "Louisiana" still. Can you please tell me which part I messed up? – Eye Burning Mar 11 '19 at 14:52
  • For [custom SVG attributes](https://stackoverflow.com/questions/15532371/do-svg-docs-support-custom-data-attributes#answer-20265073) – hungerstar Mar 11 '19 at 14:53
  • mytitle isn't an attribute. use title – Matt.S Mar 11 '19 at 14:54
  • 1
    ` inkscape:output_extension=">` - You have an open quotation mark here that should be closed or removed. – Turnip Mar 11 '19 at 14:58
  • @hungerstar it's weird that it works in JSFiddle but not in mine...hmm.... Thank you for your help though! I can find little hope now – Eye Burning Mar 11 '19 at 14:58
  • Within your click handler, `this` refers to the entire SVG. Not the `path`. You probably want `e.target`. Example: https://jsfiddle.net/jqmwz0be/1/ – Turnip Mar 11 '19 at 14:58
  • @Turnip OH WOW IT IS NOW WORKING!!!! Thank you so much >< Now I learned new things today thank you so much again!!!!!! – Eye Burning Mar 11 '19 at 15:01
  • _"I did exactly the same with youtube"_, your code is very different to the YouTube example. In the video the click event handler is bound to `g` elements, each of which has a `mytitle` attribute. You are binding your click handler to the entire SVG. – Turnip Mar 11 '19 at 15:01
  • @Turnip Should I make new groups for each path then? – Eye Burning Mar 11 '19 at 15:03
  • You could. Or you could bind the click event to the paths rather than the SVG like this: https://jsfiddle.net/jqmwz0be/2/. `this` would then refer to the `path`. – Turnip Mar 11 '19 at 15:04
  • @Turnip Woah seems like I messed up so many codes. I am totally new to this so seems like "doing exactly the same" wasn't successful... Thank you for your help again! You're just awesome.... – Eye Burning Mar 11 '19 at 15:11

0 Answers0