[SOLVED] Creating a list in HTML UI

Help & Support
1

I have a Problem with the HTML UI. I create a list in my script, but it doesn’t show up on the UI. The array I am using here is just an array for testing purpose.

That’s my script:

var Gui = pc.createScript('gui');

Gui.attributes.add('html',{type: 'asset', assetType:'html', title:'HTML Asset'});
Gui.attributes.add('css',{type: 'asset', assetType:'css', title:'CSS Asset'});

Gui.prototype.initialize = function() {
     var style = document.createElement('style');

  
    document.head.appendChild(style);

    style.innerHTML = this.css.resource || '';
   
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
  
    document.body.appendChild(this.div);
    //test List
 
    var cars = ['Saab', 'Volvo', 'BMW'];
    var test=document.createElement('div');
test.setAttribute('id','test');

var ul=document.createElement('ul');


document.body.appendChild(test);
test.appendChild(ul);

for (var i=0; i<cars.length; i++){

    var li=document.createElement('li');

    ul.appendChild(li);
    li.innerHTML=li.innerHTML + cars[i];

}
    
 this.bindEvents();
 
};


Gui.prototype.update = function(dt) {
    
};

Gui.prototype.bindEvents = function() {
    var self = this;
   
    var button = this.div.querySelector('.button');

};

That’s my HTML:

<div class='button'>Press me!</div>
<div class='text'>
   test list
</div>

my css:

.container {
    position: absolute;
    top: 16px;
    left: 16px;
    border-radius: 4px;
    background-color: #222;
    opacity:0.8;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 0, 0, .3);
}

.container > .button {
    opacity:1;
    float: left;
    display: inline-block;
    background-color: #07f;
    padding: 0 16px;
    font-size: 18px;
    line-height: 32px;
    border-radius: 4px;
    cursor: pointer;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container > .counterBox {
    float: right;
}

.container .counter {
    color: #ff0;
    font-size: 24px;
}

.container > .text {
    
    margin-top: 52px;
}
2

It’s not always easy to spot these problems by inspection. Can you share the link to a minimal, runnable scene that exhibits the problem please?

3

Sure, here is the link
https://playcanvas.com/editor/scene/536210

4

I changed your JS to:

    var cars = ['Saab', 'Volvo', 'BMW'];
    
    var test = document.getElementById('list');

    var ul=document.createElement('ul');
    test.appendChild(ul);

    for (var i = 0; i < cars.length; i++) {
        var li = document.createElement('li');

        ul.appendChild(li);
        li.innerHTML = li.innerHTML + cars[i];
    }

And your HTML to:

<div class='button'>Press me!</div>
<div class='text'>
    <p>test list below:</p>
    <div id="list"></div>
</div>

And all was well in the world:

image.png1297×822 22.5 KB

1 Like
5

It works now, thank you very much!

1 Like