Creating DOM elements using JS
 

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


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);

Если так:

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);
}

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

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Спасибо огромное!!!:write: