Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2019, 22:51
Новичок на форуме
Отправить личное сообщение для Maxtone21 Посмотреть профиль Найти все сообщения от Maxtone21
 
Регистрация: 19.06.2019
Сообщений: 2

Creating DOM elements using JS
Привет всем!)
Делаю калькулятор, создаю кнопки с помощью манипуляции с DOM.
Подскажите как можно сократить данный код пожалуйста!? Может с помощью цикла? Как именно...?


const parentsOfAllElements = document.body;
const divCalculator = document.createElement('div');
divCalculator.className = 'calculator-grid';
parentsOfAllElements.appendChild(divCalculator);

const divOutput = document.createElement('div');
divOutput.className = 'output';
divCalculator.appendChild(divOutput);

const divPrevious = document.createElement('div');
divPrevious.setAttribute('data-previous-operand', '');
divPrevious.className = 'previous-operand';
divOutput.appendChild(divPrevious);

const divCurrent = document.createElement('div');
divCurrent.setAttribute('data-current-operand', '');
divCurrent.className = 'current-operand';
divOutput.appendChild(divCurrent);

const btnAllClear = document.createElement('button');
btnAllClear.setAttribute('data-all-clear', '');
btnAllClear.className = 'span-two';
btnAllClear.innerText = 'AC';
divCalculator.appendChild(btnAllClear);

const btnDelete = document.createElement('button');
btnDelete.setAttribute('data-delete', '');
btnDelete.innerText = 'DEL';
divCalculator.appendChild(btnDelete);

const btnOperationDivide = document.createElement('button');
btnOperationDivide.setAttribute('data-operation', '');
btnOperationDivide.innerText = '÷';
divCalculator.appendChild(btnOperationDivide);

const btnNumber1 = document.createElement('button');
btnNumber1.setAttribute('data-number', '');
btnNumber1.innerText = '1';
divCalculator.appendChild(btnNumber1);

const btnNumber2 = document.createElement('button');
btnNumber2.setAttribute('data-number', '');
btnNumber2.innerText = '2';
divCalculator.appendChild(btnNumber2);

const btnNumber3 = document.createElement('button');
btnNumber3.setAttribute('data-number', '');
btnNumber3.innerText = '3';
divCalculator.appendChild(btnNumber3);

const btnOperationMultiply = document.createElement('button');
btnOperationMultiply.setAttribute('data-operation', '');
btnOperationMultiply.innerText = '*';
divCalculator.appendChild(btnOperationMultiply);

const btnNumber4 = document.createElement('button');
btnNumber4.setAttribute('data-number', '');
btnNumber4.innerText = '4';
divCalculator.appendChild(btnNumber4);

const btnNumber5 = document.createElement('button');
btnNumber5.setAttribute('data-number', '');
btnNumber5.innerText = '5';
divCalculator.appendChild(btnNumber5);

const btnNumber6 = document.createElement('button');
btnNumber6.setAttribute('data-number', '');
btnNumber6.innerText = '6';
divCalculator.appendChild(btnNumber6);

const btnOperationAddition = document.createElement('button');
btnOperationAddition.setAttribute('data-operation', '');
btnOperationAddition.innerText = '+';
divCalculator.appendChild(btnOperationAddition);

const btnNumber7 = document.createElement('button');
btnNumber7.setAttribute('data-number', '');
btnNumber7.innerText = '7';
divCalculator.appendChild(btnNumber7);

const btnNumber8 = document.createElement('button');
btnNumber8.setAttribute('data-number', '');
btnNumber8.innerText = '8';
divCalculator.appendChild(btnNumber8);

const btnNumber9 = document.createElement('button');
btnNumber9.setAttribute('data-number', '');
btnNumber9.innerText = '9';
divCalculator.appendChild(btnNumber9);

const btnOperationSubtraction = document.createElement('button');
btnOperationSubtraction.setAttribute('data-operation', '');
btnOperationSubtraction.innerText = '-';
divCalculator.appendChild(btnOperationSubtraction) ;

const btnNumberPoint = document.createElement('button');
btnNumberPoint.setAttribute('data-number', '');
btnNumberPoint.innerText = '.';
divCalculator.appendChild(btnNumberPoint);

const btnNumberZero = document.createElement('button');
btnNumberZero.setAttribute('data-number', '');
btnNumberZero.innerText = '0';
divCalculator.appendChild(btnNumberZero);

const btnEquals = document.createElement('button');
btnEquals.setAttribute('data-equals', '');
btnEquals.className = 'span-two';
btnEquals.innerText = '=';
divCalculator.appendChild(btnEquals);

Последний раз редактировалось Maxtone21, 19.06.2019 в 23:23.
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2019, 01:51
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Если так:

const parentsOfAllElements = document.body;

const divCalculator = document.createElement('div');
divCalculator.className = 'calculator-grid';
parentsOfAllElements.appendChild(divCalculator);

const divOutput = document.createElement('div');
divOutput.className = 'output';
divCalculator.appendChild(divOutput);

const btns = ['AC', 'DEL', '÷', 1, 2, 3, '*', 4, 5, 6, '+', 7, 8, 9, '-', '.', 0, '='];

for (let i = 0; i < btns.length; i++) {
    let btn = document.createElement('button');

    btn.innerText = btns[i];

    if (typeof btns[i] == 'number') {
        btn.setAttribute('data-number', '');
    }
    else if (btns[i].length == 1) {
        btn.setAttribute('data-operation', '');
    }
    else if (btns[i] == 'AC') {
        btn.setAttribute('data-all-clear', ''); 
        btn.className = 'span-two';
    }
    else if (btns[i] == 'DEL') {
        btn.setAttribute('data-delete', '');
    }

    divCalculator.appendChild(btn);
}

Последний раз редактировалось MC-XOBAHCK, 20.06.2019 в 02:17.
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2019, 10:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Maxtone21,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2020, 12:39
Новичок на форуме
Отправить личное сообщение для Maxtone21 Посмотреть профиль Найти все сообщения от Maxtone21
 
Регистрация: 19.06.2019
Сообщений: 2

Спасибо огромное!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
инициализация плагинов до вставки html-я в DOM FanAizu jQuery 3 19.01.2014 01:16
Парсить иcходник страницы после всех манипуляций JS с DOM psixojoker Общие вопросы Javascript 12 27.08.2013 03:44
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 20:26
Срочно JS developer okp Работа 13 23.08.2011 16:16