Модификация элемента HTML через класс JS

Question

При определении метода в определяемом пользователем классе, который включает в себя элемент HTML, JS выдает ошибку TypeError, говоря, что object.method не является функцией.

Я думаю, что только при возврате document.createElement класс наследует объект HTMLметоды, которые мешают определенным пользователем методам работать?Поэтому я подумал о том, чтобы содержать объект HTML как элемент в массиве, но все еще без кубиков.

class inputBox {
    constructor(attributeList){
        let element = document.createElement('input')
        //just creating a unique ID here
        attributeList.id = Math.random().toString(36).substr(2, 16);
        for (let attr in attributeList){
            this[attr] = attributeList[attr]
            element.setAttribute(attr,this[attr])
        }
        return [element,attributeList]
    };

    updateValue(newValue) {
        let element = document.querySelector(`#${this[1].id}`)
        return element.value = newValue
    };
}

это прекрасно работает

document.body.appendChild(inputBox1[0])

это не так уж много (примечание: тамнет [0], так как я запрашиваю DOM)

inputBox1.updateValue("hello")

Идея состоит в том, что вы можете вызвать что-то вроде следующего с несколькими параметрами var inputBox1 = new inputBox({type:'email', placeholder:'Your email'})

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

Answer 1

Всякий раз, когда вы явно возвращаете объект из конструктора, возвращаемое значение будет только этим объектом , а не экземпляром класса.Когда вы делаете

return [element,attributeList]

, то возвращается только простой массив, без каких-либо подключений к inputBox, поэтому ссылка на метод класса inputBox в этом массиве не будет работать.

Вместо этого поместите element и attributeList на экземпляр.

Поместив элемент в экземпляр, вы также можете избежать создания динамического уникального идентификатора для каждого элемента (который является кодомпахнуть) - скорее, просто сослаться на this.element:

class inputBox {
    constructor(attributeList){
        this.element = document.createElement('input');
        this.attributeList = attributeList;
        for (const attr in attributeList){
            this.element.setAttribute(attr,this.attributeList[attr]);
        }
    }

    updateValue(newValue) {
        this.element.value = newValue;
    }
}

Тем не менее, если в inputBox не будет больше кода, здесь, похоже, не будет никакого использования класса -после построения его единственная открытая функциональность - установить значение ввода, что можно сделать менее скрытно, просто используя ссылку на вход.Подумайте о наличии функции, которая присваивает attributeList атрибутам элемента, а затем просто использует простой элемент, например:

const myInput = assignAttributes(attributeList);
// ...
myInput.value = 'newValue';