addEventListener with click function not working

Question

Im honestly so confused and just need some help. Im being told my code is too long or too short and I just want to know why my addeventlistener isn't working like my first one and im just lost and just really need some help aside from people telling me how to write my code instead of the main focus, I have tried to re write this question 4 times already trying to just fix my code to get an answer and im getting really frustrated!

Second click function wont run and i am unsure why. The first one runs fine and does what it should but the second should allow the user to click on the circle that appears and have an info box show up, but nothing will click im assuming to make said info box appear! I did not add all the html ass there is a lot of paths. Im confused as to why the first one woukd work fne but the second doesnt.

<head>

    <meta charset="UTF-8">
    <title>POLLENATORS PRESENTATION INFOGRAPHIC APP</title>

    <!-- main css -->
    <link href="css/main.css" rel="stylesheet" type="text/css">

    <!-- load jquery -->
    <script src="js/jquery-latest.min.js"></script>




</head>


<body>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1367 769">

        <title>pollen</title>

        <!-- BACKGROUND -->
        <g id="background">
</g>


        <!-- CLOUDS -->
        <g id="clouds">
</g>

        <!-- FLOWER ANIMATION AND CLICK -->
        <g id="flower">
</g>


        <!-- FLOWER PETAL INFO -->

         <g id="flowerPetal">
</g>


        <!-- FLOWER PETAL INFO BUTTON -->

    <g id="petalBut">
 </g>


        <!-- FLOWER LEAVES INFO -->

    <g id="flowerLeaves">
</g>


        <!-- FLOWER LEAVES INFO BUTTON -->

    <g id="leafBut">
</g>


        <!-- FLOWER FRUIT INFO -->

    <g id="flowerFruit">
</g>


        <!-- FLOWER FRUIT INFO BUTTON -->

    <g id="fruitBut">
</g>


        <!-- FLOWER STEM INFO -->

    <g id="flowerStem">
</g>


        <!-- FLOWER STEM INFO BUTTON -->
    <g id="stemBut">
</g>

        <!-- FLOWER SEEDS INFO -->
    <g id="flowerSeeds">
</g>


        <!-- FLOWR SEED INFO BUTTON -->

    <g id="seedBut">
</g>


        <!-- FLOWER ROOTS INFO -->

    <g id="flowerRoots">
</g>


        <!-- FLOWER ROOTS INFO BUTTON -->

    <g id="rootBut">
</g>


        <!-- BEE ANIMATION -->
        <g id="bee">
</g>


        <!-- BAT ANIMATION -->

        <g id="bat">
</g>


        <!-- BUTTERFLY ANIMATION -->

        <g id="butterfly">
</g>


        <!-- TEXT SPEECH -->

        <g id="textSpeech">
</g>


        <!-- SPIDER ANIMATION AND CLICK -->

        <g id="spider">
</g>


        <!-- MAIN FLOWER INFO -->

        <g id="flowerInfo">
</g>


        <!-- SNAIL ANIMATION -->
        <g id="snail">
</g>

        <!-- CLICK FLOWER INSTRUCTIONS -->
        <g id="clickFlower">
</g>


        <!-- TEXT SPEECH 1 -->

        <g id="textSpeech1">
</g>


        <!-- TEXT SPEECH 2 -->
        <g id="textSpeech2">
 </g>



        <!-- TEXT SPEECH 3 -->

        <g id="textSpeech3">
            </g>


        <!-- TEXT SPEECH 4 -->
        <g id="textSpeech4">
            </g>


        <!-- TEXT SPEECH 5 -->
        <g id="textSpeech5">
</g>


        <!-- TEXT SPEECH 6 -->
        <g id="textSpeech6">
</g>

        <!-- TEXT SPEECH 7 -->
        <g id="textSpeech7">
</g>

    </svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

window.onload = function () 
{
    "use strict"



    var myBee = document.getElementById('bee');

    var myBat = document.getElementById('bat');

    var mySpider = document.getElementById('spider');

    var myFlower = document.getElementById('flower');

    var flowerPetal = document.getElementById('flowerPetal');

    var petalButton = document.getElementById('petalBut');

    var flowerLeaves = document.getElementById('flowerLeaves');

    var leafButton = document.getElementById('leafBut');

    var flowerFruit = document.getElementById('flowerFruit');

    var fruitBut = document.getElementById('fruitBut');


    var flowerStem = document.getElementById('flowerStem');

    var stemBut = document.getElementById('stemBut');

    var flowerSeeds = document.getElementById('flowerSeeds');

    var seedBut = document.getElementById('seedBut');

    var flowerRoots = document.getElementById('flowerRoots');

    var rootBut = document.getElementById('rootBut');

    var mySnail = document.getElementById('snail');

    var myButter = document.getElementById('butterfly');

    var textSpeech = document.getElementById('textSpeech');

    var textSpeech1 = document.getElementById('textSpeech1');

    var textSpeech2 = document.getElementById('textSpeech2');

    var textSpeech3 = document.getElementById('textSpeech3');

    var textSpeech4 = document.getElementById('textSpeech4');

    var textSpeech5 = document.getElementById('textSpeech5');

    var textSpeech6 = document.getElementById('textSpeech6');

    var textSpeech7 = document.getElementById('textSpeech7');

    var flowerClick = document.getElementById('clickFlower');

    var flowerInfo = document.getElementById('flowerInfo');






    TweenMax.to(myBee, 0, {
        opacity: 0
    });


    TweenMax.to(myFlower, 0, {
        opacity: 0
    });

    TweenMax.to(flowerPetal, 0, {
        opacity: 0
    });


    TweenMax.to(petalButton, 0, {
        opacity: 0
    });


    TweenMax.to(flowerLeaves, 0, {
        opacity: 0
    });


    TweenMax.to(leafButton, 0, {
        opacity: 0
    });


    TweenMax.to(flowerFruit, 0, {
        opacity: 0
    });

    TweenMax.to(fruitBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerStem, 0, {
        opacity: 0
    });

    TweenMax.to(stemBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerSeeds, 0, {
        opacity: 0
    });

    TweenMax.to(seedBut, 0, {
        opacity: 0
    });

    TweenMax.to(flowerRoots, 0, {
        opacity: 0
    });

    TweenMax.to(rootBut, 0, {
        opacity: 0
    });

    TweenMax.to(myBat, 0, {
        opacity: 0
    });

    TweenMax.to(myButter, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech1, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech2, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech3, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech4, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech5, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech6, 0, {
        opacity: 0
    });

    TweenMax.to(textSpeech7, 0, {
        opacity: 0
    });

    TweenMax.to(flowerClick, 0, {
        opacity: 0
    });


    TweenMax.to(mySnail, 0, {
        opacity: 0
    });


    TweenMax.from(mySpider, 4, {
        y: -100
    });

    TweenMax.to(mySpider, 4, {
        y: 0
    });

    TweenMax.from(flowerInfo, 4, {
        y: -100
    });

    TweenMax.to(flowerInfo, 4, {
        y: 0
    });


    mySpider.addEventListener("click", function () {

        TweenMax.to(mySpider, 3, {
            opacity: 0
        });

        TweenMax.to(flowerInfo, 3, {
            opacity: 0
        });

        TweenMax.from(myFlower, 3, {
            y: 800

        });

        TweenMax.to(myFlower, 3, {
            y: -10,
            opacity: 1

        });

        TweenMax.from(mySnail, 3, {
            x: 300,
            opacity: 1,
            delay: 2

        });

        TweenMax.to(mySnail, 3, {
            x: 20,
            opacity: 1,
            delay: 2

        });

        TweenMax.from(flowerClick, 3, {

            opacity: 0,
            delay: 3

        });

        TweenMax.to(flowerClick, 3, {

            opacity: 1,
            delay: 3

        });


        TweenMax.to(petalButton, 3, {

            opacity: 1,
            delay: 3.5,
            x: 75
        });
        TweenMax.to(leafButton, 3, {

            opacity: 1,
            delay: 3.5,
            x: 50
        });

        TweenMax.to(rootBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 100
        });

        TweenMax.to(fruitBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 100
        });

        TweenMax.to(seedBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 30
        });

        TweenMax.to(stemBut, 3, {

            opacity: 1,
            delay: 3.5,
            x: 40
        });


    });

    petalButton.addEventListener("click", function () {

        TweenMax.to(flowerPetal, 3, {
            opacity: 1
        });
    });






};

more of the code https://jsfiddle.net/o589zmqk/

Answer 1

The problem is that the #petalBut is in stack below all #textSpeech* and #butterfly and #flowerInfo elements. These elements are not hidden but just with opacity: 0 , which means they are invisible but not hidden, thus will handle all click events and these click events do not propagate to the #petalBut because it's not child nor a parent element of any of these.

The "dirty" solution in your case is to move the #petalBut to the end of the SVG stack like this:

  ...

  <!-- TEXT SPEECH 7 -->
  <g id="textSpeech7">
    <path .../>
  </g>

  <!-- FLOWER PETAL INFO BUTTON -->
  <g id="petalBut">
    <circle cx="439" cy="236" r="29" style="fill:#c1272d;stroke:#000;stroke-miterlimit:10;opacity:0.64"/>
  </g>

</svg>

The proper way is to handle all elements visibility either with visibility: hidden / visibility: visible or display: none / display: block CSS directives.

Check my working test with petalBut moved at the end here: https://zikro.gr/dbg/so/59328981

addEventListener with click function not working

Question

1 answers

solution1
0 2019-12-13 21:14:36

addEventListener with click function not working

Question

1 answers

solution1 0 2019-12-13 21:14:36

solution1
0 2019-12-13 21:14:36