Как управлять множеством дом элементов?

Question

[Адель Халитов]

Всем доброго дня, вопрос теоретический.

Вот к примеру я реализовываю калькулятор (Условно который считает 2 + 2) Операцию берет с одного инпута и при совершении не важно какого действия, пусть будет change делает вычисления.
Я сверстал, описал какой то класс который это делает.

Что хочу сделать дальше:
~При нажатии на кнопку (условно) "Добавить калькулятор" у меня должен на странице появиться такой же калькулятор и делать те же вычисления. Это мне нужно делать бесконечно раз, причем, поверх всего этого, у меня должен быть еще один класс, который будет суммировать итоги всех калькуляторов (Это очень условный пример, но именно такую задачу я сейчас решаю для практики).

Мне нужно понять на элементарных вещах как реализовывать подобное на нативном js.

Answer 1

[Максим Тимофеев]

Вы слышали про массивы? Что мешает создавать input-ы так:

<input name="myCalc[0][firstValue]" >
<input name="myCalc[0][secondValue]" >
<input name="myCalc[1][firstValue]" >
<input name="myCalc[1][secondValue]" >

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

Comments

[Адель Халитов]

Максим, спасибо!
Если не сложно, примите дискуссию в посте ниже.

Answer 2

[Михаил Власов]

В общем-то задача несложная, но может выйти объемной. Насколько я понял, вам нужно сделать инкапсулированный компонент с собственной логикой, который можно создавать сколь угодно раз на странице, при этом каждый работает независимо от других и у вас есть доступ к данным каждого. В качестве решения могу предложить следующий подход: Создаете класс калькулятор в js, добавляете в него нужные методы которые совершают операции. Также обязательно добавляете метод render, который будет вставлять html-код калькулятора на страницу в нужное вам место, при этом у корневого DOM-узла, внутри которого находится содержимое калькулятора, будет уникальный идентификатор (как его создавать – на ваш выбор, я бы пользовался guid). После создания просто добавляете id калькулятора в массив всех id калькуляторов и потом при необходимости можете либо обратиться к нужному, либо пройтись по всем и собрать какие-то данные.

Comments

[Адель Халитов]

Спасибо за ответ!
Разве это ООП подход проходится по дому, чтобы считать всю информацию?
Я просто пытаюсь на практике фундаментально изучить ООП, создаю себе такие задачки.
Возможно правильнее будет создать дополнительные метод, который будет хранить в себе всю информацию вычислений, тем более благодаря этому методу, после, можно будет запушить всю информацию в бд.

[Михаил Власов]

Адель Халитов, Ну, чтобы совсем по ООПшному сделать, то можно создать класс с методами управления калькуляторами и использовать его по паттерну синглтон, то есть создать единственный экземпляр этого класса. Тогда можно будет через этот объект управлять калькуляторами и совершать нужные операции над данными каждого из них. Вообще в javascript ООП нет смысла применять везде, просто применяйте там, где это будет проще и удобнее.