javascript - "Uncaught TypeError: Cannot read property 'checked' of null"

Question

Witam.

zrobiłem sobie skrypt, ktory ma ukrywać/pokazywać diva poprzez przełączanie checkboxa. Nie mam już pojęcia dlaczego, ale skrypt ciągle wywala mi błąd widoczny w temacie. 

function dataFilter(checkboxid, itemid) {
var checkboxstate = document.getElementById(checkboxid).checked; //Uncaught TypeError: Cannot read property 'checked' of null
if (checkboxstate == true){
    itemid.style.display = "block";
} else {
    itemid.style.display = "none";
}
}

Z góry dziękuję za wszelką pomoc.

Answer 1

Funkcja getElementById() zwraca null w przypadku nie znalezienia elementu. Zanim wywołujesz ify sprawdzające czy checbox jest checked, sprawdź czy w ogóle istnieje.

Comments

Na swojej stronie zrobiłem to mniej więcej tak: https://codepen.io/anon/pen/MLNojx, więc może coś źle zrobiłem w html.

---

Ten codepen nie działa.

---

działa tylko kolega dał przecinek na koniec linku :)

Answer 2

Zamiast zdarzeń onclick w HTML polecam pisać skrypt tylko w plikach js i nadać zdarzenie w czystym skrypcie przy użyciu:

https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener

 

Jeśli chodzi o twój problem wynika z tego że do parametru checkboxid nie jest przekazywany element "a".

Co jest przekazywane nie wiem, nie używalem takiego sposobu przekazywania parametrów wprost z HTML, ale obstawiałbym string albo brak wartości, sprawdź przy użyciu console.log(checkboxid); co jest przekazywane.

Comments

Można w ten sposób przekazać element input dodając jako argument  this do funkcji onclick="dataFilter(this)", czyli ten element, na którym ten klick został wywołany. Ale to są stare szkoły. Radzę poszukać aktualnych poradników. 

Podanie argumentu b, onclick="dataFilter(a, b)" to już jest desperacka próba przekazania dodatkowego obiektu. Tak to nie działa. Skąd funkcja ma pobrać ten obiekt? Z html? Niestety nie da rady. Silnik tego nie przełknie.  Do tego zamknąłeś inputa.

<input id="a" type="checkbox" checked="true" onclick="dataFilter(a, b)">pokazać?</input>

Zapomnij o tym co do tej pory się nie nauczyłeś i zacznij jeszcze raz.

tak tego nie rób

<input id="a" type="checkbox" checked onclick="dataFilter(this)">pokazać?
<div id="b">this is demo</div>

const itemid = document.getElementById("b");
function dataFilter(el) {
if (el.checked == true){
    itemid.style.display = "block";
  } else {
    itemid.style.display = "none";
  }
}

 

---

Akurat wcześnie inputami wszelkiego rodzaju sie nie interesowałem, stąd moje błędy. Dzięki wielkie za wyczerpujący komentarz(szkoda, że nie odpowiedź).

---

Mam jeszcze 2 pytania:

1. Czy da się przerobic ten skrypt, żeby można go użyć kilka razy

2. Czy moge stworzyć kilka rozsypanych po stronie divów z tym samym id, a skrypt mi je schowa?(bo o to mi mniej więcej chodzi)