Html Question posted in
Some basic documentation can be found here.

Html – Why does my Javascript not work when trying to toggle classes?

When I try to apply this code, which works perfectly fine on its own,

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Toggle Class</title>
  <style>
    .ces-smiley {
      cursor: pointer;
      transition: stroke-width 0.3s, stroke 0.3s;
    }
    
    .selected {
      stroke-width: 2;
      stroke: red;
    }
    
    .inactive {
      /* Define your inactive styles here */
      opacity: 0.5;
    }
  </style>
</head>

<body>

  <div class="ces-smileys">
    <svg class="ces-smiley-zma ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green"></circle>
  </svg>

    <svg class="ces-smiley-mak ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue"></rect>
  </svg>

    <svg class="ces-smiley-neu ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="50,5 90,90 10,90" stroke="black" stroke-width="3" fill="yellow"></polygon>
  </svg>

    <svg class="ces-smiley-moe ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="orange"></ellipse>
  </svg>

    <svg class="ces-smiley-zmo ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3"></line>
  </svg>
  </div>

  <script>
    // Select all SVG elements with the class "ces-smiley"
    var svgs = document.querySelectorAll('.ces-smiley');

    // Add click event listener to each SVG element
    svgs.forEach(function(svg) {
      svg.addEventListener('click', function() {
        // Remove the 'selected' class from all SVG elements
        svgs.forEach(function(svg) {
          svg.classList.remove('selected');
          svg.classList.add('inactive'); // Add 'inactive' class to all SVGs
        });

        // Add the 'selected' class to the clicked SVG element and remove 'inactive' class
        this.classList.remove('inactive');
        this.classList.add('selected');
      });
    });
  </script>



</body>

</html>

to my webpage: https://www.salland.nl/?bctest the code does not work (To see where the code is being used, you first have to click the purple button on the left, then the button in the form after that, then you see the classes (smileys) I want to toggle)

I consoled Chat GPT, checked all the classes, the console and looked online for answers, expecting for something to help me fix it. No success so far.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Apparently the code did not work because my javascript was executed before the dialogue was fully loaded. I added this javascript to make it work:

    setTimeout(function(){

    //Your javascript snippet here

    }, 100);

  2. 0

    Try this code:

        var svgs = document.querySelectorAll('.ces-smiley');
    
    svgs.forEach(function(svg) {
      svg.addEventListener('click', function() {
        svgs.forEach(function(svg) {
          svg.classList.remove('selected');
        });
        
        this.classList.add('selected');
      });
    });
    .ces-smiley {
  cursor: pointer;
  transition: stroke-width 0.3s, stroke 0.3s;
  opacity: 0.5;
}

.ces-smiley.selected {
  stroke-width: 2;
  stroke: red;
  opacity: 1;
}
      <div class="ces-smileys">
    <svg class="ces-smiley-zma ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green"></circle>
    </svg>

      <svg class="ces-smiley-mak ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
      <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue"></rect>
    </svg>

      <svg class="ces-smiley-neu ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
      <polygon points="50,5 90,90 10,90" stroke="black" stroke-width="3" fill="yellow"></polygon>
    </svg>

      <svg class="ces-smiley-moe ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
      <ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="orange"></ellipse>
    </svg>

      <svg class="ces-smiley-zmo ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
      <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3"></line>
    </svg>
  </div>
    Login or Signup to reply.
  3. 0

    First : I recommend you to use <!DOCTYPE html> at the top of your file.

    And don’t hesitate to correctly indent your element for most visibility

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Toggle Class</title>
    <style>
        .ces-smiley {
            cursor: pointer;
            transition: stroke-width 0.3s, stroke 0.3s;
        }

        .selected {
            stroke-width: 2;
            stroke: red;
        }

        .inactive {
            /* Define your inactive styles here */
            opacity: 0.5;
        }
    </style>
</head>

    I cannot consult where you want to make your changes, so do you have an error message in console ?
    What exactly is your problem ? Is the page displayed correctly ? It is the listener that doesn’t work ?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search