Wykonanie akcji po zaznaczeniu checkboxa

Question

Cześć wszystkim! Próbuję napisać skrypt w js, ale niestety nie wiem jak się do tego zabrać. Skrypt ma na celu, po zaznaczeniu checkboxa, dodać do diva na stronie określoną liczbę. Po odznaczeniu go natomiast przypisana do niego wartość ma zostać odjęta z wyżej wymienionego diva.

<div id="calculator">
  <label><input type="checkbox" value="10">Zaznaczenie dodaje 10</label>
  <label><input type="checkbox" value="15">Zaznaczenie dodaje 15</label>
  <label><input type="checkbox" value="20">Zaznaczenie dodaje 20</label>
  <label><input type="checkbox" value="25">Zaznaczenie dodaje 25</label>
</div>
<div id="wynik">
0 
<!--tutaj po zaznaczeniu checkboxów ma się dodać ich wartość, a więc zaznaczając
 na przykład pierwszy i drugi powinna być wartość 25. Po odznaczeniu pierwszego 
powinno zostać 15 bez przeładowywania strony-->
</div>

Znalazłem na forum kawałek kodu który mógłby mi pomóc, niestety nie wiem jak go zmodyfikować.

document.getElementById("calculator").addEventListener('change', function(e){
  	var container = document.getElementById('wynik'); //chwytamy div calculator i nasłuchujemy zmiany w zaznaczeniu checkboxów
    container.innerHTML = 'test'; //wpisywanie do diva #wynik, domyślnie pusty
  	document.querySelectorAll('#calculator input:checked').forEach(function(element){
//tu mam problem co i jak

    });
});

Jeżeli pytanie wydaje się głupie to przepraszam, dopiero się uczę. Nie jest to żadne zadanie domowe, ani nic w tym stylu, a raczej problem który postanowiłem rozwiązać żeby się czegoś nauczyć, więc bardzo proszę i z góry dziękuję za cierpliwość i wyjaśnienie w prostu sposób jak rozwiązać mój problem :)

Answer 1

Jako że to do celów nauki to pozwolę sobie dać Ci gotowca do analizy: https://codepen.io/anon/pen/YddWjJ

Generalnie jest to taka wersja bardzo podstawowa, w praktyce robi się to nieco inaczej, bardziej uniwersalnie itp. ale do nauki jest ok. Spróbuj sobie przeanalizować ten kod, poczytać o poszczególnych rzeczach w dokumentacji MDN, a jak coś będzie niejasne to pisz :)

Comments

Dziękuję bardzo! Mógłbym też ewentualnie podesłać mój kod dla chociażby podstawowego code review? Chciałbym wiedzieć czy czegoś nie robię/nie rozumiem w zły sposób :)

---

daj na forum to inni też pewnie zerkną na to.

---

Źle się wyraziłem, miałem na myśli wstawienie kodu tutaj :)