Стилизация объектов через JavaScript

237
24 февраля 2018, 23:25

Хочу сделать так, чтобы при нажатии на кнопку увеличивался шрифт текста. Пример: 

styling(){ 
var fsize = document.getElementById('myText').value; // принимаем значение инпута 
 
document.getElementById('myText').style.fontSize = fsize; // применяем значение с инпута(переменной) для стилизации текста 
}
<p id="myText"> hello world </p> 
<input type="number" value="18" min="8" max="28"> 
<input type="submit" onclick="styling()">
Вопрос: почему не применяется стилизация к тексту? Сам OnClick - работает, но не применяется именно стилизация. Где у меня ошибка или как еще можно это реализовать?

Answer 1

В коде три ошибки

  1. В объявлении функции styling() пропущено слово function
  2. Вы пытаетесь вытащить значение из параграфа, а не из инпута
  3. Вы не указываете единиц измерения для размера

function styling() { 
  var fsize = document.getElementById('mySize').value; // принимаем значение инпута 
  document.getElementById('myText').style.fontSize = fsize + "pt"; // применяем значение с инпута(переменной) для стилизации текста 
}
<p id="myText"> hello world </p> 
<input type="number" id="mySize" value="18" min="8" max="28"> 
<input type="submit" onclick="styling()">

Answer 2

Во первых вы пытаетесь взять значение для для размера шрифта из параграфа с текстом. Я думаю Вы хотели бы его получить из инпута

Во вторых задавать размер нужно с указанием единиц измерения

const styling = () => { 
  const fsize = document.getElementById('value').value; 
  const text = document.getElementById('myText'); 
  text.style.fontSize = fsize + 'px'; 
}
<p id="myText">hello world </p> 
<input id="value" type="number" value="18" min="8" max="28"> 
<input type="submit" onclick="styling()">

Answer 3

В вашем коде вы берете value в элемента p, в которого нет такого свойства. Если вы напишите, например, вот так:

document.getElementById('myText').style.fontSize = '18px';

то шрифт поменяется.

READ ALSO
Вывод значения из функции JS vanilla [дубликат]
javascript

Вывод значения из функции JS vanilla [дубликат]

На данный вопрос уже ответили:

 176
Зацикливается событие нажатии кнопки
javascript

Зацикливается событие нажатии кнопки

Есть страница, куда с помощью ajax запроса вставляются данныеВот кусочек кода:

 176
Проблема с датой в JS
javascript

Проблема с датой в JS

ЗдравствуйтеПытаюсь сделать так чтобы, при отправке формы в БД записывалась дата отправки в формате "ДД

 206
Сайдбар SublimeText3
javascript

Сайдбар SublimeText3

Здравствуйте, возник вопрос: При включении сайдбара в ST3 он сворачивается после перехода в другое окно или же просто при написании кода через...

 108