[SOLVED] How to enable/disable HTML

Help & Support
1

I want the HTML to be rendered when the character hits an object.

If it hits once more, HTML rendering should be disabled, but it does not disappear.

It doesn’t disappear even if you turn off the HTML script within the project window.

I couldn’t find an answer even though I looked for HTML-related enalble/disable posts in the forum.

Even if I run the UI project in the tutorial, deactivation does not work even if I manipulate activation in the project edit window.

I think I’m going crazy please help me

this is my code

var Shop = pc.createScript('shop');

Shop.prototype.initialize = function() {
    const app = this.app;
    const playerInven = app.root.findByName('Player');
    this.pi = playerInven.script.playerInventory;
    this.entity.collision.on('collisionstart',this.onCollision,this);
    this.onIframe = app.root.findByName('Cjmall');
};

Shop.prototype.onCollision = function (event) {
    if(event.other.name ==='Player'){
        this.onIframe.enabled = !this.onIframe.enabled;
    }
};
2

Hi @Jo_turn! Can you try to use this.onIframe.enabled = false; instead of this.onIframe.enabled = !this.onIframe.enabled;?

3

@Albertos
Thanks for your adv. I have tried. But result was same.
Is there other way ?

4

I think HTML is different with Entity inside PlayCanvas.
So Any of this.entity.enabled = true/false like will not apply to HTML.
Just my op.

5

Another suggestion if it is a HTML element is this.onIframe.style.display = 'none';.

1 Like
6

When using/adding html to the document page keep in mind that it is completely separate from the PlayCanvas app.

It isn’t attached to entities, scripts etc and therefore has to be managed directly and explicitly as shown in Alberto’s reply.

Here’s an example https://playcanvas.com/project/764032/overview/tlkio-chat-integration

    this.on('enable', function () {
        this.div.style.display = 'block';
    }, this);
    
    this.on('disable', function () {
        this.div.style.display = 'none';
    }, this);
    
    this.on('destroy', function () {
        this.div.parentNode.removeChild(this.div);
    }, this);
2 Likes
7

Thank you for everyone I solved!

This my code

Shop.js

Shop.prototype.onCollision = function (event) {
    
    if(event.other.name ==='Player' && this.onIframe.enabled === false) {
        this.app.fire('div:enable');     
        this.onIframe.enabled = true;
        this.app.mouse.disablePointerLock();
    }
    else if(event.other.name ==='Player' && this.onIframe.enabled === true) {
        this.app.fire('div:disable');
        this.onIframe.enabled = false;
    }
};

Shop_Ui.js

    this.app.on('div:enable', function(){
        this.div.style.display = 'block';
    }, this);
    
    this.app.on('div:disable', function(){
        this.div.style.display = 'none';
    }, this);

For others who will have the same problem…

2 Likes