Увеличение шрифта на 6 пунктов с каждой новой строчкой

#javascript #шрифты

Дана задача: Запросить у пользователя число от 1 до 10. Вывести его на страницу прописью
10 раз в столбик, увеличивая размер шрифта на 6 пунктов.
Вот pastebin как я пытался её решить. https://pastebin.com/2gZrBLmX.
Помогите пожалуйста!



num = prompt('Enter number from 1 to 10')
if ((num > 10) || (num < 1)) {
  alert('Error. Type number from 1 to 10')
} else {
  for (var q = 1; q <= 10; q++) {
    document.write("
" + num)
    for (var y = 1; y <= 10; y++) {
      document.getElementById('res' + y).style.fontSize = fontSize + "50px";
    }
  }
}
body {
  position: absolute;
  width: 100%;
  top: 40%;
  text-align: center;
}





    

Ответы

Ответ 1

Вообщем-то у вас хороший код, только в этой строчке вам нужно додумать логику

document.getElementById( 'res' + y).style.fontSize = fontSize + "50px";


Вам нужно завести переменную на размер шрифта, в каждой итерации цикла её увеличивать,
и потом делать fontSize+"px".

Кроме того возможно ваши два цикла объединить в один. Для этого, например можно задавать
стили inline, например 
.


Ответ 2

Размер шрифта можно получить с помощью getComputedStyle()

Ну а далее я бы сделал так :



var num = prompt('Enter number from 1 to 10');
var size = parseFloat(window.getComputedStyle(document.body, null).getPropertyValue('font-size'));

if (num > 10 || num < 1) {
  alert('Error. Type number from 1 to 10');
} else {
  for (var i = 1; i <= 10; i++) {
    var div = document.createElement('div');
    div.innerText = num;
    div.style.fontSize = size + 'px';
    document.body.append(div);
    size += 5;
  }
}


Ответ 3

Приветствую. JS для решения данной задачи не нужен. CSS (SCSS) достаточно. Если по
какой-то причине препроцессор не используется (не верю), тогда можно воспользоваться
переменными css или, в крайнем случае, скопировать выход после sass-а:

.preview {
  @for $i from 1 through 10 {
    > div:nth-child(#{$i}) {
      font-size: 1px * $i * 6;
    }
  }
}


https://codepen.io/rasdaniil/pen/KZNgyP


Ответ 4

К сожалению, у меня не работает с window.getComputedStyle, хоть и на сайте всё показывает... 



var num = prompt('Enter number from 1 to 10');
var size = parseFloat(window.getComputedStyle(document.body, null).getPropertyValue('font-size'));

if (num > 10 || num < 1) {
  alert('Error. Type number from 1 to 10');
} else {
  for (var i = 1; i <= 10; i++) {
    var div = document.createElement('div');
    div.innerText = num;
    div.style.fontSize = size + 'px';
    document.body.append(div);
    size += 5;
  }
}