0

The code is from this page https://usefulangle.com/post/362/custom-elements It builds a custom html form element with shadow DOM.

But, when I open it in a browser, it's blank. enter image description here

I opened the code in "Inspect" and saw this error.

enter image description here

class InputPlusMinus extends HTMLElement {
  constructor() {
    super();

    let template = document.querySelector('#input-plus-minus-template').content;
    this.attachShadow({
      mode: 'open'
    }).appendChild(template.cloneNode(true));

    let add_button = this.shadowRoot.querySelector("#add");
    let subtract_button = this.shadowRoot.querySelector("#subtract");
    let count_textbox = this.shadowRoot.querySelector("#count");

    this.setAttribute('value', '1');

    add_button.addEventListener('click', () => {
      let current = parseInt(count_textbox.value, 10);
      count_textbox.value = current + 1;
      this.setAttribute('value', count_textbox.value);
    });

    subtract_button.addEventListener('click', () => {
      let current = parseInt(count_textbox.value, 10);
      if (current > 1) {
        count_textbox.value = current - 1;
        this.setAttribute('value', count_textbox.value);
      }
    });
  }
}

customElements.define('input-plus-minus', InputPlusMinus);
<template id="input-plus-minus-template">
        <style>
        button {
            width: 25%;
            /* other CSS */
        }
    
        input {
            width: 50%;
            /* other CSS */
        }
        </style>
        <div id="container">
            <button id="subtract">-</button>
            <input type="text" id="count" value="1" readonly />
            <button id="add">+</button>
        </div>
    </template>


<!-- custom element being used -->
<input-plus-minus id="sample"></input-plus-minus>
usr18
  • 23
  • 5

1 Answers1

0

Based on the comments, I modified the code and it works now. Thank You so much!!

class InputPlusMinus extends HTMLElement {

  connectedCallback() {
    let template = document.querySelector('#input-plus-minus-template').content;
    this.attachShadow({
      mode: 'open'
    }).appendChild(template.cloneNode(true));

    let add_button = this.shadowRoot.querySelector("#add");
    let subtract_button = this.shadowRoot.querySelector("#subtract");
    let count_textbox = this.shadowRoot.querySelector("#count");

    this.setAttribute('value', '1');

    add_button.addEventListener('click', () => {
      let current = parseInt(count_textbox.value, 10);
      count_textbox.value = current + 1;
      this.setAttribute('value', count_textbox.value);
    });

    subtract_button.addEventListener('click', () => {
      let current = parseInt(count_textbox.value, 10);
      if (current > 1) {
        count_textbox.value = current - 1;
        this.setAttribute('value', count_textbox.value);
      }
    });
  }
}

customElements.define('input-plus-minus', InputPlusMinus);
<template id="input-plus-minus-template">
            <style>
            button {
                width: 25%;
                /* other CSS */
            }
        
            input {
                width: 50%;
                /* other CSS */
            }
            </style>
            <div id="container">
                <button id="subtract">-</button>
                <input type="text" id="count" value="1" readonly />
                <button id="add">+</button>
            </div>
        </template>


<!-- custom element being used -->
<input-plus-minus id="sample"></input-plus-minus>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
usr18
  • 23
  • 5