Cannot add a html element

Help & Support
1

Hello! I can’t add a html screen to document, what I am doing wrong?

const dataBase = {
            imgBack: `url('data:image/png;base64,image')`,
            imgStars: `data:image/png;base64,image`,
            imgStarOne: `data:image/png;base64,image`,
          };

          const styles = `
          .body {
            color: #fff;
            width: 100%;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            background-color: #002605;
            background-image: ${dataBase.imgBack};
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat; }

          .hn-content__wrap {
            height: 100vh;
            display: flex;
            justify-content: center; }

          .hn-content {
            max-width: 450px;
            display: grid;
            grid-template-rows: auto 1fr auto;
            padding: 40px 26px;
            justify-items: center; }

          .hn-content-header {
            display: flex;
            flex-direction: column;
            align-items: center; }

          .hn-content-header__img {
                margin: -30px 0;
            }

          .hn-content-header__text {
            margin-top: 50px;
            text-align: center;
            max-width: 260px; }

          .hn-content-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: static;
            align-self: center;
            padding: 0;
            transform: none; }

          .hn-content-body__img {
            margin-bottom: -30px; }

          .hn-content-body__text {
            margin-top: 22px;
            text-align: center;
            max-width: 260px; }

            .hn-content-footer {
                width: 100%;
            }

            .button1 {
                color: #fff;
                font-weight: normal;
                font-size: 14px;
                line-height: 16px;
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: center;
                text-align: center;
                text-decoration-line: underline;
                text-transform: uppercase;
                margin-bottom: 33px;
            }

            .button2 {
                color: #fff;
                width: 100%;
                height: 50px;
                font-weight: bold;
                font-size: 18px;
                line-height: 21px;
                display: flex;
                align-items: center;
                text-align: center;
                justify-content: center;
                text-decoration: none;
                text-transform: uppercase;
                border: 2px solid #FFFFFF;
                box-sizing: border-box;
                border-radius: 5px;
                background: rgba(0, 38, 5, 0.2);
            }
          `;

          const html = `
            <style>${styles}</style>
            <div class="body">
              <main class="hn-content__wrap"> 
                <div class="hn-content">
                  <div class="hn-content-header">
                    <img class="hn-content-header__img" width="324" height="106" src="${dataBase.imgStars}">

                  </div>
                  <div class="hn-content-body">
                    <img class="hn-content-body__img" width="165" height="173" src="${dataBase.imgStarOne}">
                    <div class="hn-content-body__text">Зарегистрируйся, чтобы сохранить свои результаты и получить бонусную 1<svg width="15" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.723 13.944L7.5 11.005l-4.222 2.938-.5-.361 1.49-4.924L.17 5.55l.19-.587L5.5 4.859 7.191 0h.616l1.689 4.859 5.142.104.19.587-4.1 3.108 1.49 4.924-.495.361z" fill="#fff"/><path d="M7.313 10.324h.371l3.64 2.53-1.285-4.242.114-.355 3.531-2.678-4.431-.09-.3-.22-1.454-4.183-1.455 4.187-.3.218-4.431.092L4.844 8.26l.114.355-1.284 4.243 3.639-2.534z" fill="#F42020"/></svg>.</div>
                  </div>
                  <div class="hn-content-footer">
                        <a href="#" class="button1">Продолжить игру</a>
                        <a href="#" class="button2">регистрация</a>
                    </div>
                </div>
              </main>
            </div>
            `;

    this.app.once('game:continue',function(){
        this.entities[0].enabled = false;
    }.bind(this));
    this.app.on('reg:show',function(){
        this.app.fire('debug:settext','reg');
        const domElement = document.createElement('div');
        domElement.innerHTML = html;
        window.document.body.appendChild(domElement);
        const button1 = domElement.querySelector('.button1');
        button1.addEventListener('click',function(){
            document.head.removeChild(domElement);
        }.bind(this));
    }.bind(this));
2

Hi @pekarnik,

Your code seems correct, not sure why it fails.

If you step in with the debugger does it execute when the event fires? Did you check with the browser dev tools if the element gets added to the DOM, even if it isn’t visible?

3

Yes, I can see it in browser debugger when event fired…but cannot understand, why I cant see it…

image
image691×464 24.7 KB

4

Most likely then the issue is in your CSS, from a quick look I’d say if your .body element isn’t absolute positioned (position: absolute;), then it may be overflowing under the canvas element.

It may be positioned below the canvas element, and that would be outside of the window viewport. Try hovering with your mouse over the elements, usually the browser provides some visual clues where the element might be positioned.

2 Likes
5

ah, I see… it’s really in a wrong position, I will tell our html programmers, thank you!

1 Like