Why does my click function not work inside of this SVG on mobile devices but it does on desktop?

Question

I have 2 simple JS function's shown in this snippet:

 function ReplaceHeader(id,content) { var container = document.getElementById(id); container.innerHTML = content; } function ReplaceContent(id,content) { var container = document.getElementById(id); container.innerHTML = content; } 

 .st0 { fill: #C6C8AB; } .st1 { clip-path: url("#SVGID_2_"); fill: #C6C8AB; } .st2 { fill: #5362FF; } .st3 { fill: #2A4D5C; } .st4 { font-family: 'HalisR-Bold'; } .st5 { font-size: 10px; } .st6 { enable-background: new; } .st7 { fill: none; stroke: #C6C8AB; stroke-width: 3; } .st8 { clip-path: url("#SVGID_4_"); fill: none; stroke: #C6C8AB; stroke-width: 3; stroke-miterlimit: 10; } path.active { stroke: #5362FF; stroke-width: 8px; paint-order: stroke; stroke-linejoin: round; } text.active tspan { fill: #5362FF !important; } .gd-globe a:hover > path { stroke: #5362FF; stroke-width: 8px; paint-order: stroke; stroke-linejoin: round; } .gd-globe a:hover > text tspan, .gd-globe a:hover > text { fill: #5362FF !important; } 

 <div class="gd-globe"> <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.1 359.6" style="enable-background:new 0 0 485.1 359.6;" xml:space="preserve"> <!-- Click replace content JS --> <rect x="198.9" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1406 167.3344)" class="st0" width="3" height="128.6"/> <rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0" width="3" height="128.6"/> <rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0" width="128.6" height="3"/> <rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0" width="128.6" height="3"/> <rect x="108.8" y="130.7" class="st0" width="132.5" height="3"/> <rect x="244.3" y="230.8" class="st0" width="135.3" height="3"/> <rect x="242.4" y="36.1" class="st0" width="3" height="290.2"/> <g> <defs> <rect id="SVGID_1_" x="2.9" y="26.3" width="474.9" height="312.5"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;"/> </clipPath> <path class="st1" d="M240.3,338.8c-69.8,0-129.8-16.1-173.6-46.6C25.5,263.5,2.9,224.6,2.9,182.6c0-42.9,21.3-81.8,60-109.6 c42.5-30.5,103.8-46.6,177.4-46.6c70.9,0,131.4,16.1,174.8,46.6c40.4,28.4,62.7,67.3,62.7,109.6c0,41.8-23.1,80.7-64.9,109.6 C369.3,322.3,308,338.8,240.3,338.8z M240.3,29.3c-72.9,0-133.7,15.9-175.6,46.1C26.8,102.6,5.9,140.7,5.9,182.6 c0,41,22.2,79.1,62.5,107.2c43.3,30.2,102.8,46.1,171.9,46.1c67.1,0,127.7-16.4,170.8-46.1c41-28.3,63.6-66.4,63.6-107.2 c0-41.3-21.8-79.3-61.4-107.2C370.5,45.2,310.6,29.3,240.3,29.3z"/> </g> <path class="st2" d="M390.2,231.4c-0.1-58.8-47.7-106.5-106.5-106.5H244h-0.1h-0.5c-0.1,0-0.3,0-0.4,0.1c-3.1,0.5-5.5,3-5.8,6.2 c0,0.1-0.1,95.2-0.1,95.2H204c-51.5,0-93.2-41.7-93.2-93.2S152.5,40,204,40h40c3.7,0.1,6.9-2.8,7-6.5s-2.8-6.9-6.5-7 c-0.2,0-0.3,0-0.5,0h-39.9c-59,0-106.7,47.8-106.7,106.8c0,58.9,47.8,106.7,106.7,106.7H244c3.7,0,6.8-3,6.8-6.8v-94.7h33 c49.5,0,90.4,38.8,92.9,88.3c0.1,1.6,0.1,3.2,0.1,4.8c0,3.2-0.2,6.3-0.5,9.5c-4.7,47.5-44.8,83.7-92.6,83.5H244 c-3.7,0-6.7,3-6.8,6.7c0,2.9,1.9,5.5,4.7,6.5l0,0c0.6,0.2,1.3,0.3,2,0.3h39.8C342.6,337.7,390.2,290.1,390.2,231.4"/> <!-- Social Entrepreneurs --> <a href="javascript:ReplaceHeader('header','Social Entrepreneurs'); javascript:ReplaceContent('content','some content'); "> <path class="st3" d="M331.4,150.6c3.8,0,6.8-3.1,6.8-6.8s-3.1-6.8-6.8-6.8c-3.8,0-6.8,3.1-6.8,6.8l0,0 C324.6,147.5,327.7,150.6,331.4,150.6"/> <text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6"> <tspan x="0" y="0" class="st3 st4 st5">SOCIAL</tspan> <tspan x="-24.8" y="12" class="st3 st4 st5">ENTREPRENEURS</tspan> </text> </a> </svg> </div> <h5 id="header" class="h2" style="font-size:18px; text-align:left;">header</h2> <span class="copy" id="content">title</span> 

and some href's with the function coded inline. The hrefs are around SVGs. I have created a Codepen with all the code:

https://codepen.io/maniac123/pen/PXovZq

On click of the href, it should be changing the values in a h2 with the id "header" and a span with the id "content".

This all works perfectly on desktop, but on an iPhone device and android, it isn't pulling in the values. The h2 and span aren't changing.

Answer 1

The proble comes from javascript:someFunction the SVG is not the problem.
It seems that javascript:someFunction does not work in all browsers.
This means that not only mobile is suffering from it.
Please take a look at: a href=javascript:function() in firefox not working .
Here is also an intresting discusion: JavaScript function in href vs. onclick .

To answer your question I would use the onlick shown below:

 // Made the functions to 1 function because the content was the same function ReplaceContent(id,content) { var container = document.getElementById(id); container.innerHTML = content; } 

 <a href='#' onclick=' ReplaceContent("header", "New header") ReplaceContent("text", "More Lorem ipsum...") ' >test</a> <h2 id='header'>Header</h2> <p id='text'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 

I believe that the next snippet is clearer for reuse:

 function LinkReplace() { // Now you do not need to fiddle in the HTML for JS functions ReplaceContent("header", "New header") ReplaceContent("text", "More Lorem ipsum...") } function ReplaceContent(id,content) { var container = document.getElementById(id); container.innerHTML = content; } 

 <a href='#' onclick='LinkReplace()' >test</a> <h2 id='header'>Header</h2> <p id='text'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 

With SVG:

 function LinkReplace() { // Now you do not need to fiddle in the HTML for JS functions ReplaceContent("header", "New header") ReplaceContent("text", "More Lorem ipsum...") } function ReplaceContent(id,content) { var container = document.getElementById(id); container.innerHTML = content; } 

 .st0 { fill: #C6C8AB; } .st1 { clip-path: url("#SVGID_2_"); fill: #C6C8AB; } .st2 { fill: #5362FF; } .st3 { fill: #2A4D5C; } .st4 { font-family: 'HalisR-Bold'; } .st5 { font-size: 10px; } .st6 { enable-background: new; } .st7 { fill: none; stroke: #C6C8AB; stroke-width: 3; } .st8 { clip-path: url("#SVGID_4_"); fill: none; stroke: #C6C8AB; stroke-width: 3; stroke-miterlimit: 10; } path.active { stroke: #5362FF; stroke-width: 8px; paint-order: stroke; stroke-linejoin: round; } text.active tspan { fill: #5362FF !important; } .gd-globe a:hover > path { stroke: #5362FF; stroke-width: 8px; paint-order: stroke; stroke-linejoin: round; } .gd-globe a:hover > text tspan, .gd-globe a:hover > text { fill: #5362FF !important; } 

 <div class="gd-globe"> <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.1 359.6" style="enable-background:new 0 0 485.1 359.6;" xml:space="preserve"> <rect x="198.9" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1406 167.3344)" class="st0" width="3" height="128.6"/> <rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0" width="3" height="128.6"/> <rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0" width="128.6" height="3"/> <rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0" width="128.6" height="3"/> <rect x="108.8" y="130.7" class="st0" width="132.5" height="3"/> <rect x="244.3" y="230.8" class="st0" width="135.3" height="3"/> <rect x="242.4" y="36.1" class="st0" width="3" height="290.2"/> <g> <defs> <rect id="SVGID_1_" x="2.9" y="26.3" width="474.9" height="312.5"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;"/> </clipPath> <path class="st1" d="M240.3,338.8c-69.8,0-129.8-16.1-173.6-46.6C25.5,263.5,2.9,224.6,2.9,182.6c0-42.9,21.3-81.8,60-109.6 c42.5-30.5,103.8-46.6,177.4-46.6c70.9,0,131.4,16.1,174.8,46.6c40.4,28.4,62.7,67.3,62.7,109.6c0,41.8-23.1,80.7-64.9,109.6 C369.3,322.3,308,338.8,240.3,338.8z M240.3,29.3c-72.9,0-133.7,15.9-175.6,46.1C26.8,102.6,5.9,140.7,5.9,182.6 c0,41,22.2,79.1,62.5,107.2c43.3,30.2,102.8,46.1,171.9,46.1c67.1,0,127.7-16.4,170.8-46.1c41-28.3,63.6-66.4,63.6-107.2 c0-41.3-21.8-79.3-61.4-107.2C370.5,45.2,310.6,29.3,240.3,29.3z"/> </g> <path class="st2" d="M390.2,231.4c-0.1-58.8-47.7-106.5-106.5-106.5H244h-0.1h-0.5c-0.1,0-0.3,0-0.4,0.1c-3.1,0.5-5.5,3-5.8,6.2 c0,0.1-0.1,95.2-0.1,95.2H204c-51.5,0-93.2-41.7-93.2-93.2S152.5,40,204,40h40c3.7,0.1,6.9-2.8,7-6.5s-2.8-6.9-6.5-7 c-0.2,0-0.3,0-0.5,0h-39.9c-59,0-106.7,47.8-106.7,106.8c0,58.9,47.8,106.7,106.7,106.7H244c3.7,0,6.8-3,6.8-6.8v-94.7h33 c49.5,0,90.4,38.8,92.9,88.3c0.1,1.6,0.1,3.2,0.1,4.8c0,3.2-0.2,6.3-0.5,9.5c-4.7,47.5-44.8,83.7-92.6,83.5H244 c-3.7,0-6.7,3-6.8,6.7c0,2.9,1.9,5.5,4.7,6.5l0,0c0.6,0.2,1.3,0.3,2,0.3h39.8C342.6,337.7,390.2,290.1,390.2,231.4"/> <!-- Social Entrepreneurs --> <a href='#' onclick='LinkReplace()'> <path class="st3" d="M331.4,150.6c3.8,0,6.8-3.1,6.8-6.8s-3.1-6.8-6.8-6.8c-3.8,0-6.8,3.1-6.8,6.8l0,0 C324.6,147.5,327.7,150.6,331.4,150.6"/> <text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6"> <tspan x="0" y="0" class="st3 st4 st5">SOCIAL</tspan> <tspan x="-24.8" y="12" class="st3 st4 st5">ENTREPRENEURS</tspan> </text> </a> </svg> </div> <h2 id='header'>Header</h2> <p id='text'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>