Zmiana wielkości nagłówka poprzez wybór z listy

Question

Witam. Oglądałem film Pana Mirosława w którym mówił, żeby udzielać się na forach jeśli chce się polepszyć skilla. No to się udzielę. Otóż chciałem napisać sobie coś dla rozrywki w HTML+Js i zacząłem coś takiego, co wpisuje w h1 wpisany w prompt text. Dodałem też listę dzięki której można by zmieniać wielkość nagłówka. Rzecz w tym, że działa to tylko częściowo, to znaczy można powiedzieć jednorazowo. Trzeba odświeżać stronę po każdej zmianie wielkości. Moje pytanie brzmi jak można by to przerobić aby działało bez konieczności przeładowania strony. Jeżeli to co do tej pory zrobiłem jest jakieś dziwne, zagmatwane to proszę o prostsze rozwiązania. Chętnie się czegoś nauczę.

Wklejam tutaj Jest mieszany kod. Robiłem to w jednym pliku więc może być trochę bałagan. Pozdrawiam.

Answer 1

Cześć, sam jestem początkujący ale przysiadłem nad Twoim problemem i o to co udało mi się naskrobać. Pierwszą sprawą jest to że kod był dość nieczytelny i ja bym zamienił nazwy zmiennych na bardziej oczywiste.

Mój HTML:

<h1 id="naglowek">Domyślny</h1>
<form>
<select id="formularz">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</form>

Moja wersja JS-a zmieniająca tag nagłówka wygląda tak:

document.getElementById("formularz").addEventListener("change",function() {zmiana(this,"naglowek")});
function zmiana(form,identyfikator){
	var element = document.getElementById(identyfikator),
	wynikFormularza = form.value,
	rozmiar = "h" + wynikFormularza,
	nowyElement = document.createElement(rozmiar),
	rodzic = element.parentNode;
	
	nowyElement.innerHTML = element.innerHTML;
	nowyElement.id = identyfikator;
	rodzic.replaceChild(nowyElement,element);
}

Ze względu na późną godzinę nie będę tłumaczył krok po kroku działania. Mam nadzieję że poradzisz sobie z ogarnięciem tego sam, jeśli nie to pytaj a ja odpowiem rano.

Comments

No dobra działa. Może trochę źle robię, że próbuję pisać takie coś bez odpowiedniej wiedzy (bo nie douczyłem się za bardzo jak operować na funkcjach np, a nie mogę się zebrać do przerobienia całej serii o JS na YT). Tak czy siak dzięki za pomoc. Będę sobie to jeszcze analizował :] Jak chcesz się jeszcze pobawić w naprawianie czyjegoś kodu to mogę podesłać skrypcik na zmianę kontrastu z użyciem sessionStorage. Napisałem tam tyle linijek, że aż strach czytać, a myślę, że ktoś bardziej doświadczony zrobiłby to zajmując mniej miejsca.

Ale się rozpisałem...

---

Proponuję dodać to jako zapytanie tutaj na forum, chętnię to przejrzę nie tylko ja :). Ja sam mam dużo braków ale staram się je nadrobić. Ja korzystam z kursu W3Schools i bardzo go polecam.

---

Proszę bardzo :)

Answer 2

Zamiast onclicka użyj addEventListener, zamiast eventu click użyj change, do samych funkcji nie zaglądałem. 

Takie coś zamiast onclicka na elemencie select. 

document.querySelector('select').addEventListener("change",function() { rozmiar(); });