Zmiana wielkości fontu

https://codepen.io/anon/pen/LMMEqP witam czemu mi to nie działa, dodam , że na wpisanie na sztywno px działa.

Zrób tak

const p = document.querySelector('#para');
const but = document.querySelector('button');
let f = getFontSize();
function getFontSize(){
  return document.querySelector('#font').value;
}

but.addEventListener('click', function () {
    p.style.fontSize = getFontSize() + "px";
});

Dodałem Ci tam funkcję - bo może będziesz chciał korzystać kiedyś ze zmiennej f. Jeśli nie będziesz korzystał, to możesz wywalić funkcję i bezpośrednio w listenerze pobierać value z tego inputa.

Ogólnie Twój błąd polegał na tym, że wartość z inputa pobierałes tylko raz (za pierwszym wywołaniem kodu, a nie na clicku), a na evencie ona nie zmieniała się. Input #font nie miał domyslnej wartości - dlatego Ci wcale nic nie działało.

Jeśli zmienna f nie będzie Ci wcale potrzebna to jej nie robisz i w eventListenerze dajesz
p.style.fontSize = document.querySelector('#font').value + "px", a wartość domyślną to już ustawiasz raczej normalnie poprzez value dla samego inputa w htmlu.

albo w ulubionym jquery
http://jsfiddle.net/tpwo5eg1/