Как создать пользовательский элемент HTML с использованием JavaScript? - PullRequest
Новая
       28

Как создать пользовательский элемент HTML с использованием JavaScript?

0 голосов
/ 15 ноября 2018

Я хотел бы иметь возможность создавать пользовательский элемент HTML, который может отображать значение cookie, чтобы я мог легко вставлять значения cookie в мой документ.мой код до сих пор: 

var cNum = 0;

customElements.define('get-cookie', getC);

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

    cNum++;
    var cName = this.getAttribute('cName');
    this.setAttribute('id', cName + cNum);
    var currentE = document.getElementById(cName + cNum);
    var cValue = 'Oops! We have run into a problem';
    if (this.hasAttribute('cName')) {
      cValue = getCookie(this.getAttribute('img'));
    }
    var outC = document.createElement('a');
    outC.innerHTML = cValue;
    currentE.appendChild(outC);
  }
}

и 

<p>
  Current User: <get-cookie cName="currentUSR" ></get-cookie>
</p>

Но я получаю эту ошибку, когда запускаю ее на firefox:

ReferenceError: can 't получить доступ к лексическому объявлению `getC 'перед инициализацией (myfile.js: 4: 1)

ТАКЖЕ: У меня нулевое знание jQuery, и я бы предпочел, чтобы я мог держаться подальше от этого.

Вся помощь очень ценится!Спасибо!

РЕДАКТИРОВАТЬ: я забыл добавить, что у меня уже есть функция getCookie (), определенная в другом месте моего кода.

1 Ответ

0 голосов
/ 15 ноября 2018

customElements.define('get-cookie', getC); должно быть внизу, после того как вы на самом деле определили класс.

Сохранение после определения класса должно исправить это: 

var cNum = 0;

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

    cNum++;
    var cName = this.getAttribute('cName');
    this.setAttribute('id', cName + cNum);
    var currentE = document.getElementById(cName + cNum);
    var cValue = 'Oops! We have run into a problem';
    if (this.hasAttribute('cName')) {
      cValue = this.getCookie(this.getAttribute('img'));
    }
    var outC = document.createElement('a');
    outC.innerHTML = cValue;
    currentE.appendChild(outC);
  }

  getCookie() {
    return 'John Doe';
  }
}

customElements.define('get-cookie', getC);
<p>Current User:
  <get-cookie cName="currentUSR"></get-cookie>
</p>

Я также не был уверен, что здесь такое getCookie. Итак, я создал метод с именем getCookie для класса и теперь я использую его в constructor с ключевым словом this.

...