Показать сообщение отдельно
  #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.
Ответить с цитированием