Dies ist Teil meiner Klassenhausaufgaben. Es ist eine kleine Webanwendung. Der folgende Codeteil ist eine Funktion für eine Auswahlschaltfläche (Kontrollkästchen). Der Code funktioniert gut.

Mein Problem ist, dass ich diesen Fehler auf der Konsole erhalte:

Nicht erfasster TypeError: Die Eigenschaft 'geprüft' von null
kann nicht festgelegt werden bei selectGirls (indexj.js: 163)
bei HTMLAnchorElement.onclick (index.html: 137)

Ich weiß, dass ich diesen Fehler erhalte, weil ich diese Elemente nicht auf jeder Seite habe. Um das zu verdeutlichen, meine ich, dass Seite 1 zwei Kontrollkästchen hat, aber Seite 2 hat 5 Kontrollkästchen, so.

Ich möchte dieselbe JS-Datei für alle Seiten verwenden. Meine Frage ist, wie ich diese Konsolenfehler bestmöglich vermeiden kann. Ich möchte nicht, dass sie sich als Lösung vor der Konsole verstecken. Ich freue mich sehr über Ihre Beiträge.

function selectAllStudents() {
    unselectAllStudents();
    let boxes = $(".scores").toArray();
    document.getElementById('check_Terrilyn').checked = true;
    document.getElementById('check_Vinnie').checked = true;
    document.getElementById('check_Boren').checked = true;
    document.getElementById('check_Tempie').checked = true;
    document.getElementById('check_Mapes').checked = true;
    document.getElementById('check_Fletcher').checked = true;
    document.getElementById('check_Bovee').checked = true;
    document.getElementById('check_Figgs').checked = true;
}
2
Berglund 18 Apr. 2018 im 12:36

7 Antworten

Beste Antwort

Am einfachsten ist es zu überprüfen, ob sie vorhanden sind

if (document.getElementById('check_Terrilyn'))
  document.getElementById('check_Terrilyn').checked = true;
3
Rory McCrossan 18 Apr. 2018 im 09:38

Ich sehe, dass Sie bereits jQuery verwenden. Warum nicht vollständig nutzen und die Verwendung von getElementById beenden?

Mach einfach $( ... ).prop('checked',true). jQuery behandelt den Fall, dass das Element nicht gefunden wird.

function selectAllStudents() {
    unselectAllStudents();
    let boxes = $(".scores").toArray();
    $('#check_Terrilyn, #check_Vinnie, #check_Boren, #check_Tempie, #check_Mapes, #check_Fletcher, #check_Bovee, #check_Figgs').prop('checked',true);
}
1
Rory McCrossan 18 Apr. 2018 im 09:41

Verwenden Sie prop, da Sie jquery markiert haben.

function selectAllStudents() {
    unselectAllStudents();
    let boxes = $(".scores").toArray();
    $('#check_Terrilyn').prop( "checked", true );
    //for the rest of them
}

Oder erstellen Sie ein Array von IDs, die Sie iterieren und überprüfen können, ob sie vorhanden sind, bevor Sie die Eigenschaft checked festlegen

var array = ['check_Terrilyn', 'check_Vinnie']; //add more ids as required
array.forEach( s => $("#"+s).prop( "checked", true ) );

Oder mit einfachen js

var array = ['check_Terrilyn', 'check_Vinnie']; //add more ids as required
var fnGetEl = (id) => document.getElemetById(id);
array.forEach( s => {
  var el = fnGetEl(s);
  if(el)
  {
    el.checked = true;
  }
});
1
gurvinder372 18 Apr. 2018 im 09:40

Wenn Sie sie alle in einen aktivierten Zustand versetzen, wählen Sie sie mit class aus und durchlaufen Sie sie alle. Auf diese Weise spielt es keine Rolle, ob keine gefunden werden.

Sie scheinen auch jQuery zu verwenden, sodass der Code dann auf Folgendes vereinfacht werden kann:

function selectAllStudents() {
  unselectAllStudents();
  let boxes = $(".scores").toArray();
  $('.checkbox').prop('checked', true);
}
1
Rory McCrossan 18 Apr. 2018 im 09:40

Sie können so etwas tun:

let elm = document.getElementById('check_Terrilyn');

elem && elem.checked = true;
2
Rohit Goyal 18 Apr. 2018 im 09:41

Ich mache es immer

if(document.getElementById('check_Terrilyn')!="null")
    document.getElementById('check_Terrilyn').checked=true;
1
Rory McCrossan 18 Apr. 2018 im 09:41

Annäherung mit ID und wenn

if (document.getElementById('check_Terrilyn')){
    document.getElementById('check_Terrilyn').checked = true;
}

Ansatz mit Klassen

//ES6
Array.from(document.getElementsByClassName('commonclass')).forEach(e => {
    e.checked = true;
});
3
Cristian S. 18 Apr. 2018 im 10:16