Блог

В моем документе есть html, который я хотел бы переместить внутрь другого элемента. У меня есть средство выбора цвета, о котором вы можете найти подробную информацию здесь: https://www.javascripting.com/view/really-simple-color-picker

Когда я определяю parentColorEl , он говорит, что элемент равен null. Я понятия не имею, почему. Я ясно вижу, что есть идентификатор цвета, за которым следует число. Родительским элементом является div.

 <div id="container">
</div>

<div><input id="color0" type="hidden" name="color0" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51, 51, 153);">amp;nbsp;</div></div>
<div><input id="color1" type="hidden" name="color1" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51, 51, 153);">amp;nbsp;</div></div>
<div><input id="color2" type="hidden" name="color2" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51, 51, 153);">amp;nbsp;</div></div>


<script>

class ColorButtons extends HTMLElement {
  constructor(index) {
    // Always call super first in constructor
    super();

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create spans
    var wrapper = document.createElement('span');
    wrapper.setAttribute('class','wrapper');

    shadow.appendChild(wrapper);
    
    let colorEl = document.getElementById('color' index);
    
    let parentColorEl = colorEl.parentElement
    
    wrapper.appendChild(colorEl);
    
  }
}

customElements.define('color-buttons', ColorButtons);

function updateInterface(){

    container.innerHTML = "";
    
    for(i=0; i<3;   i){
        container.appendChild(new ColorButtons(i));
    }
    
}
updateInterface()

</script>