Function doesn't get triggered

JavaScript
1

I have a SVG,
http://stevenh.fatcow.com/test/index.html
I’m trying to make it so that when a box is clicked (GPS TIMING), this function runs

<script>
function activateGPS() {

var adms = document.getElementById("system-adms")

adms.className="inactive"

} 
</script>

graying out another box to make it appear to be semi-transparent by adding this class

.inactive {fill-opacity:0.3}

When the group (container that holds the box) is clicked, the function should run, any ideas as to why its not?

2

Hi there lurtnowski,

try …

adms.classList.add( 'inactive' );

… instead of…

adms.className="inactive"

If you need to remove it, use…

adms.classList.remove( 'inactive' );

coothead

3 Likes
3

Hi there lurtnowski,

I have just noticed that IE11 has issues with SVG and "classList ". :eek:

Source :-

https://caniuse.com/#search=classList

If that is a concern for you, then I would suggest that you try these modifications…

  1. on line #149 remove onclick=“myFunction1()”
  2. on line #454 remove onclick=“activateGPS();”
  3. remove this…
<script>
function activateGPS() {

var adms = document.getElementById("system-adms")

adms.className="inactive"

} 
</script>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction1() {
  document.getElementById("myDropdown-1").classList.toggle("show");
}
</script>
  1. add this…
<script>
(function( d ) {
   'use strict';

   d.getElementById( 'shape5-31' ).addEventListener( 'click',
      function() {
         var adms = d.getElementById( 'system-adms' ), cls;
    if ( adms.classList ) {
         adms.classList.add( 'inactive' );
      }
    else {
        cls = adms.getAttribute( 'class' );
        adms.setAttribute( 'class', cls + ' inactive' );
 }
      }, false ); 

  /* 
   When the user clicks on the button, 
   toggle between hiding and showing the dropdown content 
  */
   d.querySelector('.dropbtn' ).addEventListener( 'click',
      function() {
        d.getElementById( 'myDropdown-1' ).classList.toggle( 'show' );
    }, false );
}( document ));
</script>

Note

Javascript is definitely not my forte, so the gurus here,
may have a better solution for the IE11 problem. :winky:

coothead

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.