Таблица умножения на JS(стилизация)

Рейтинг: 0Ответов: 2Опубликовано: 04.02.2023

Доброго времени суток уважаемые! Подскажите как можно сделать чтобы после вывода в консоль таблица выравнивалась по правому краю. Пробовал добавить стили oneRow.style.float = 'right', textAlign = 'right' и другие. Выдает ошибку. Подскажите пожалуйста.

let oneRow = '';
const multiply = (number) => {
    for (let i = 1; i <= number; i++) {
        for (let j = 1; j < 11; j++) {
            oneRow += (j*i) + " ";       
        }
    console.log(oneRow);
        oneRow = '';
    } 

}

multiply(5);

css javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Попробуйте использовать padStart()

let oneRow = '';
const multiply = (number) => {
    for (let i = 1; i <= number; i++) {
        for (let j = 1; j < 11; j++) {
            oneRow += (''+(j*i)).padStart((''+number).length + 1, ' ') + " ";
        }
    console.log(oneRow);
        oneRow = '';
    } 

}

multiply(11);

▲ 1

let oneRow = '';

const multiply = (number) => {
  for (let i = 1; i <= number; i++) {
    for (let j = 1; j < 11; j++) {
      let k = j * i;
      oneRow += " ".repeat(getNumberLength(number * 10) - getNumberLength(k) + 1) + k;
    }
    console.log(oneRow);
    oneRow = '';
  } 

}

multiply(5);

function getNumberLength(n) {
  return n.toString().length
}

Объяснение к вопросу

У строк нет пропроции style, такая пропорция есть у элементов (HTMLElement), допустим: document.body.style, вот в этом примере style будет объектом со стилями, а у строк 'some str'.style будет undefined, по этому и вылезала ошибка.

Можно конечно через стили прижать, но стили нужно вписывать в метод консоли (Способ рабочий на Firefox, в других браузерах не тестировал):

let oneRow = '';

const multiply = (number) => {
  for (let i = 1; i <= number; i++) {
    for (let j = 1; j < 11; j++) {
      let k = j * i;
      oneRow += " ".repeat(getNumberLength(number * 10) - getNumberLength(k) + 1) + k;
    }
    console.log('%c' + oneRow, 'float: right;');
    oneRow = '';
  } 

}

multiply(5);

function getNumberLength(n) {
  return n.toString().length
}

Вот скриншот:

P.S.: Я это не вставил как воспроизводимый пример, по той причине, что консоль в StackOverflow не позволяет внедрять стили в логи.