CODEWITHSUNDEEP
javascriptjquery
techno bisuit
techno bisuit

Reputation: 83

How to add function inside a init

Just starting to learn js.

Once you click the overlay the toggle class will be activated too.

The first code generate an overlay on the website and once it's open and you click the overlay it will close. 

<script> 

init=()=>{
    //SELECT & BIND (CLICK) EVENT
    document.querySelector('a.menuToggle').addEventListener('click',modal.overlay.init);
}
modal={
    overlay:{
        init:()=>{
            //CREATE OVERLAY 
            var overlay = document.createElement('overlay');
            overlay.id = 'welcomeDivs';
            //SET (CLICK) EVENT TO REMOVE ITSLEF
            overlay.addEventListener('click',modal.overlay.remove);

            //APPEND TO INTERFACE
            document.body.appendChild(overlay);

        },
        remove:(e)=>{
            //REMOVE ITSELF
            e.target.parentNode.removeChild(e.target);
        }       
    }
}

//ON DOCUMENT LOAD RUN INIT
document.addEventListener('DOMContentLoaded',init);

</script>

What I want to do is once you click the body or the overlay the toggle class will be clicked also.

<script type="text/javascript">
 $(function() {
        $("#welcomeDivs").click(function() {
            $(".parela").toggleClass('myClass');
        });
    });
</script>

Can you help me with this please

Upvotes: 0

Views: 86

Answers (2)

prasanth
prasanth

Reputation: 22490

Try this

  1. First append to the body then apply the click function.
  2. Add some innerHTML to overlay tag.Then only you could see the overlay in body
  3. And apply with click event use with on() function of jquery
  4. Finaly see the outerHTML of parela in console.log

$(function() {
        $(document).on('click','#welcomeDivs',function() {
            $(".parela").toggleClass('myClass');
            console.log($(".parela")[0].outerHTML)
        });
    });
    
    init=()=>{   document.querySelector('a.menuToggle').addEventListener('click',modal.overlay.init);
}
modal={
    overlay:{
        init:()=>{
            var overlay = document.createElement('overlay');
            overlay.id = 'welcomeDivs';
            overlay.innerHTML ="i m overlay text"
            document.body.appendChild(overlay);
             overlay.addEventListener('click',modal.overlay.remove);

        },
        remove:(e)=>{
            e.target.parentNode.removeChild(e.target);
        }       
    }
}

//ON DOCUMENT LOAD RUN INIT
document.addEventListener('DOMContentLoaded',init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="menuToggle">click</a>
<p class="parela">i m a parela</p>

Upvotes: 1

Farhad Azarbarzinniaz
Farhad Azarbarzinniaz

Reputation: 739

You code is correct but you using it in wrong way. becuse you bind click event to none exist selector

 $(function() {
        $("#welcomeDivs").click(function() {
            $(".parela").toggleClass('myClass');
        });
    });

in above code you try bind event to none exist code. instead you can use this code

 $(function() {
        $('body').on('click',"#welcomeDivs",function(event) {
             if($(event.target).attr('id')=='welcomeDivs')
            {
            $(".parela").toggleClass('myClass');
            }
        });
    });

Upvotes: 0

Related Questions