js object oriented factory pattern (super basic)

Recently, I have developed a small project with low technical level, and then I write in a mess. Why don't I use object-oriented encapsulation after that? Every call is ok? And then I started object-oriented learning
html: 
    <button id="btn1">Button1</button>
    <button id="btn2">Button1</button>
css: 
    /*Clear default style*/
    *{
        margin: 0;padding: 0;text-decoration: none;list-style: none;
    }
    /*Clear float*/
    .clearfloat:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
    .clearfloat{zoom:1;}

    /*mask */
    .b_box{
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        top: 0;
        left: 0;
    }
    /*Mask layer end*/
    /*---------------------------------------------------------------------------------------------------------------------*/

    /*Tips--------------------------*/
    /*PC End over 768px*/
    @media only screen and (min-width: 768px) {
        .b_div{
            width: 600px;
            margin: 0 auto;
            background: #fff;
            border-radius: 5px;
            animation: myopacity .5s forwards; 
        }   
    }
    /*Mobile end less than 768px*/
    @media only screen and (max-width: 768px) {
        .b_div{
            width: 85%;
            margin: 0 auto;
            background: #fff;
            border-radius: 5px;
            animation: myopacity .5s forwards; 
        }

    }
    .b_div_active{
        animation: myopacityover .5s forwards;
    }
    @keyframes myopacity{
        from{
            opacity: 0;
            margin-top: 0;
        }
        to{
            opacity: 1;
            margin-top: 150px;
        }
    }
    @keyframes myopacityover{
        from{
            opacity: 1;
            margin-top: 150px;
        }
        to{
            opacity: 0;
            margin-top: 300px;
        }
    }

    .b_div h3{
        text-align: center;
        font-size: 24px;
        line-height: 60px;
    }
    .b_btn{
        text-align: center;
        padding: 10px 0;
        margin-top: 10px;
    }
    .b_btn button{
        border: none;
        color: #FFFFFF;
        padding: 5px 10px;
        border-radius:3px;
        margin: 0 10px;
    }
    .b_btn button:last-child{
        background: #e01d1d;
    }
    .b_btn button:first-child{
        background: #00a000;
    }
    .b_text{
        text-align: center;
    }
    /*End of message------------*/

css has written media query, which looks a lot, but the real key is not much

js: 
    //Create a div with class as bounce_
    var bouncesBox = document.createElement("div");
    bouncesBox.setAttribute("class","bounces_box")
    document.body.appendChild(bouncesBox)

    //Tips------------------
    function BInfo(title,txt){
        this.title = title;
        this.txt = txt;
        this.info = function(){
            var bouncesBox = document.getElementsByClassName("bounces_box")[0];
            var _html = '<div class="b_box"><div class="b_div"><h3>'+this.title+'</h3><div class="b_text"><p>'+this.txt+'</p></div><div class="b_btn"><button class="b_info">Determine</button></div></div></div>';
            bouncesBox.innerHTML += _html;
            this.divRemove()
        };
    }

    BInfo.prototype.divRemove = function(){
        var bInfo = document.getElementsByClassName("b_info")[0];
        var bDiv = document.getElementsByClassName("b_div")[0];
        bInfo.onclick=function(){
            bDiv.classList.add("b_div_active");
            bDiv.parentNode.remove()
        }
    }

    //End of message--------------------------------------------------------
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    btn1.onclick = function(){
        var bInfo1 = new BInfo("Tips","I'm general information");
        bInfo1.info()
    }
    btn2.onclick = function(){
        var bInfo2 = new BInfo("Tip 2","I'm general information 2");
        bInfo2.info()
    }

Say this js:

this in BInfo() points to BInfo
 BInfo.prototype.xxx: this prototype is a prototype. This is a pointer to an object. In the big words, BInfo.prototype.xxx is similar to writing a function in BInfo. You can understand it this way in the early stage ==
Every time BInfo() is called, new BInfo() is required; in this way, you can call repeatedly, write parameters to it, and different pop-up content can be realized

Tell me about the hole I stepped in:

I created a div at the beginning of js. The div created in BInfo is added to the created Div. however, I directly added it to the body at the beginning, but the btn click event can only be executed once after the page is refreshed, and the click again fails. I hope the white people can give me some advice!!!

Welcome message

Tags: Mobile less

Posted on Fri, 01 May 2020 19:27:20 -0700 by ihsreal