Ergebnis 1 bis 11 von 11
  1. #1
    tatata ist offline Grünschnabel
    registriert
    07-11-2013
    Beiträge
    6

    TypeError: this.form is null

    Hallo,
    ich beschäftige mich erst seit kurzem mit JavaScript. Es kann also gut sein, dass es sich um einen grundlegenden Fehler handelt und es wäre toll wenn ihr mir diesen dann verständlich erklären würdet.
    Bei meiner Seite handelt es sich um eine Tabelle die ich mittels JavaScript dynamisch bearbeiten will. Eine serverseitige programmierung zwecks Datenübergabe ist vorgesehen aber muss gerade noch nicht umgesetzt werden.
    In der Tabelle sind Checkboxen und eine Checkbox welche aktiviert werden soll wenn alle Boxen in der Zeile checked sind bzw. alle abwählt. Bei dem Code hierfür habe ich mich an Beispielen aus dem Internet orientiert. Das funktionierte bisher auch sehr gut bis ich mittels innerHTML noch ein Billder in die Zelle einfügte.
    HTML-Code:
    			<table class="tabelle" border="1" cellpadding="12" style="text-align:center">
    				<!--usw.-->
    				<tbody>					
    					<tr>
    						<form name="myform" action="" method="post">
    							<!--usw.-->
    							<td class="alles"><input type="checkbox" name="done" value="alles" onclick="this.value=activateAll(this.form.done)"></td>
    							
    							<td class="6" id="waschen6"><input type="checkbox" name="done" value="6"onclick="this.value=uncheckAllDone(this.form.done)"></td>
    
    						</form>
    					</tr>
    <!--usw.-->
    				</tbody>
    			</table>
    Die Funktionen der Checkboxen:
    Code:
    function activateAll(field) {			
    	/*field[0].disabled=true;*/
    	if (field[0].checked == true) {
    		for (i = 0; i < field.length; i++) {
    			field[i].checked = true;
    		}			
    	}
    	else {
    		for (i = 1; i < field.length; i++) {
    			field[i].checked = false;
    		}		
    	}
    	disableCheckbox();					
    }
    function uncheckAllDone(field) {
    	for (i = 1; i < field.length; i++) {
    		if (field[i].checked == false) {
    			field[0].checked = false;
    			
    			break
    		}
    		else {
    			field[0].checked = true;
    			
    		}
    	}
    }
    Die Funktion welche das Bild einfügt:
    Code:
    function addNote(ID) {
    		var neuerInhalt = '<img src="icons/write.png" alt="doku" onclick="toggleDiv(\'doku'+ID+'\')">';
    		var alterText = document.getElementById(ID).innerHTML;
    		document.getElementById(ID).innerHTML = alterText + neuerInhalt;
    }
    Danke für eure Mühen

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: TypeError: this.form is null

    An welcher Stelle rufst du die Funktion addNote auf?

  3. #3
    tatata ist offline Grünschnabel
    registriert
    07-11-2013
    Beiträge
    6

    AW: TypeError: this.form is null

    HTML-Code:
    			<table class="tabelle" border="1" cellpadding="12" style="text-align:center">
    				<!--usw.-->
    				<tbody>					
    					<tr>
    						<form name="myform" action="" method="post">
    							<!--hier-->
    							<td class="geplant">Waschen<img onclick="createSelectAddNote ('waschen');" src="icons/writeAdd.png" alt="+Add" class="addNote"></td>
    							<td class="alles"><input type="checkbox" name="done" value="alles" onclick="this.value=activateAll(this.form.done)"></td>
    							
    							<td class="6" id="waschen6"><input type="checkbox" name="done" value="6"onclick="this.value=uncheckAllDone(this.form.done)"></td>
    
    						</form>
    					</tr>
    <!--usw.-->
    				</tbody>
    			</table>
    Die Funktion createSelectAddNote ruft addNoteForm auf, welche dann addNote aufruft:

    Code:
    function createSelectAddNote (masnahme) {
    	var newdiv = document.createElement('div');
    	newdiv.setAttribute('class','selectAddNote');
    	newdiv.setAttribute('id',masnahme);
    	newdiv.style.display = 'none';
    	newdiv.innerHTML = '\
    				<form action="input_button.htm"> \
    					<p>\
    						<input type="button" name="Text" value="06:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'6\')">\
    						<input type="button" name="Text" value="07:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'7\')">\
    						<input type="button" name="Text" value="08:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'8\')">\
    						<input type="button" name="Text" value="09:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'9\')">\
    						<input type="button" name="Text" value="10:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'10\')">\
    						<input type="button" name="Text" value="11:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'11\')">\
    						<input type="button" name="Text" value="12:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'12\')">\
    						<input type="button" name="Text" value="13:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'13\')">\
    						<input type="button" name="Text" value="14:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'14\')">\
    					</p>\
    				</form>\
    				<img class="picCancel" onclick="toggleDiv(\''+masnahme+'\')"  src="icons/cancel.png" alt="abbrechen">\
    			</div>\
    	';
    	document.body.appendChild(newdiv);
    	toggleDiv(masnahme);
    }
    function addNoteForm(masnahme,ID) {
    	if (ID <= aktuelleStunde) {
    	var newdiv = document.createElement('div');
    	newdiv.setAttribute('class','doku');
    	newdiv.setAttribute('id','doku'+masnahme+ID);
    	newdiv.style.display = 'none';
    	newdiv.innerHTML = '\
    				<form action="textarea.htm">\
    					<p>Besondere Vorkommnisse:<br>\
    						<textarea name="user_eingabe" cols="50" rows="12"></textarea>\
    					</p>\
    				</form>\
    				<img class="ok" onclick="toggleDiv(\'doku'+masnahme+ID+'\');"  src="icons/check.png" alt="absenden">\
    			</div>\
    			';		
    		document.body.appendChild(newdiv);
    		addNote(masnahme+ID);
    		toggleDiv(masnahme);		
    		toggleDiv('doku'+masnahme+ID);
    	}	
    }

  4. #4
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: TypeError: this.form is null

    und an welcher Stelle tritt der Fehler auf?

  5. #5
    tatata ist offline Grünschnabel
    registriert
    07-11-2013
    Beiträge
    6

    AW: TypeError: this.form is null

    Das Bild wird erfolgreich der Zelle hinzugefügt. Wird die Checkbox in der Zelle jetzt aber angeklickt entsteht der Fehler.
    Wurde in der Box vor dem hinzufügen ein Häckchen per klick gesetzt, ist es nach dem hinzufügen des Bilds auch weg.

  6. #6
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: TypeError: this.form is null

    steht keine Zeilennummer bei der Fehlermeldung?
    Ich kann this.form nur an stellen sehen, wo es einen Wert hat, folglich muss diese Meldung von woanders herkommen.

    So Salamitaktik bringt i.d.R. nichts, einfacher wäre es, wenn du uns etwas zeigen könntest, wo man deinen Fehler 1:1 nachvollziehen könnte.

  7. #7
    tatata ist offline Grünschnabel
    registriert
    07-11-2013
    Beiträge
    6

    AW: TypeError: this.form is null

    Unten der komplette Code von index.htm functions.js und style.css
    Der Fehler entsteht so:
    (Die Checkbox ganz links ist zum aktivieren aller anderen da.)
    Auf +Add drücken um die Auswahlfelder zu bekommen.
    Dann zum Beispiel 06:00 oder 07:00 anklicken. Danach auf absenden drücken.
    Das Bild bzw. der Text doku wird neben einer Checkbox erscheinen. Diese Checkbox funktioniert nicht mehr und bei jedem klick darauf entsteht der Fehler.

    index.htm
    HTML-Code:
    <!DOCTYPE html>
    	<html>
    		<head>
    			<script type="text/javascript" src="functions.js"></script>
    			<link rel="stylesheet" type="text/css" href="style.css">
    			<title>Tabellen Beispiel</title>
    			<meta name="viewport", initial-scale=1.0, maximum-scale=1.0, user-scalable=0" charset="utf-8"/>
    		<head/>
    		<body>					
    			<table class="tabelle" border="1" cellpadding="12" style="text-align:center">
    				<thead>					
    				</thead>
    				<tfoot>					
    				</tfoot>
    				<tbody>					
    					<tr>
    						<form name="myform" action="" method="post">
    							<td class="geplant">Waschen<img onclick="createSelectAddNote ('waschen');" src="icons/writeAdd.png" alt="+Add" class="addNote"></td>
    							<td class="alles"><input type="checkbox" name="done" value="alles" onclick="this.value=activateAll(this.form.done)"></td>
    							<td class="vorherige"><input type="checkbox" name="doneBefore" value="vorherige"onclick="this.value=uncheckAllDone(this.form.done)"></td>
    							<td class="6" id="waschen6"><input type="checkbox" name="done" value="6"onclick="this.value=uncheckAllDone(this.form.done)"></td>
    							<td class="7" id="waschen7"><input type="checkbox" name="done" value="7" checked onclick="this.value=uncheckAllDone(this.form.done)"></td>
    							<td class="8" id="waschen8"><input type="checkbox" name="done" value="8"onclick="this.value=uncheckAllDone(this.form.done)"></td>
    							<td class="9" id="waschen9"></td>
    							<td class="10" id="waschen10"></td>
    							<td class="11" id="waschen11"></td>
    							<td class="12" id="waschen12"></td>
    							<td class="13" id="waschen13"></td>
    							<td class="14" id="waschen14"></td>
    						</form>
    					</tr>
    				</tbody>
    			</table> 
    			<script>
    				disableCheckbox();
    				document.write('Stand vom: ' + aktuellesDatum+'<br>');
    			</script>			
    		</body>
    	</html>
    functions.js
    Code:
    var aktuellesDatum = new Date();
    var aktuelleStunde = aktuellesDatum.getHours();
    
    function createSelectAddNote (masnahme) {
    	var newdiv = document.createElement('div');
    	newdiv.setAttribute('class','selectAddNote');
    	newdiv.setAttribute('id',masnahme);
    	newdiv.style.display = 'none';
    	newdiv.innerHTML = '\
    				<form action="input_button.htm"> \
    					<p>\
    						<input type="button" name="Text" value="06:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'6\')">\
    						<input type="button" name="Text" value="07:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'7\')">\
    						<input type="button" name="Text" value="08:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'8\')">\
    						<input type="button" name="Text" value="09:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'9\')">\
    						<input type="button" name="Text" value="10:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'10\')">\
    						<input type="button" name="Text" value="11:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'11\')">\
    						<input type="button" name="Text" value="12:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'12\')">\
    						<input type="button" name="Text" value="13:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'13\')">\
    						<input type="button" name="Text" value="14:00"\
    							onclick="addNoteForm(\''+masnahme+'\',\'14\')">\
    					</p>\
    				</form>\
    				<img class="picCancel" onclick="toggleDiv(\''+masnahme+'\')"  src="icons/cancel.png" alt="abbrechen">\
    			</div>\
    	';
    	document.body.appendChild(newdiv);
    	toggleDiv(masnahme);
    }
    
    
    function addNoteForm(masnahme,ID) {
    	if (ID <= aktuelleStunde) {
    	var newdiv = document.createElement('div');
    	newdiv.setAttribute('class','doku');
    	newdiv.setAttribute('id','doku'+masnahme+ID);
    	newdiv.style.display = 'none';
    	newdiv.innerHTML = '\
    				<form action="textarea.htm">\
    					<p>Besondere Vorkommnisse:<br>\
    						<textarea name="user_eingabe" cols="50" rows="12"></textarea>\
    					</p>\
    				</form>\
    				<img class="ok" onclick="toggleDiv(\'doku'+masnahme+ID+'\');"  src="icons/check.png" alt="absenden">\
    			</div>\
    			';		
    		document.body.appendChild(newdiv);
    		addNote(masnahme+ID);
    		toggleDiv(masnahme);		
    		toggleDiv('doku'+masnahme+ID);
    	}	
    }
    function addNote(ID) {
    		var neuerInhalt = '<img src="icons/write.png" alt="doku" onclick="toggleDiv(\'doku'+ID+'\')">';
    		var alterText = document.getElementById(ID).innerHTML;
    		document.getElementById(ID).innerHTML = alterText + neuerInhalt;
    }
    
    function toggleDiv(element){
     if(document.getElementById(element).style.display == 'none')
      document.getElementById(element).style.display = 'block';
     else
           document.getElementById(element).style.display = 'none';
    }
    
    function disableCheckbox() {
    	var box;
    	box = document.getElementsByName('doneNext');
    	for (var i = 0; i < box.length; i++) {	
    		box[i].disabled = true;	
    	}	
    	box = document.getElementsByName('doneBefore');
    	for (var i = 0; i < box.length; i++) {	
    		box[i].disabled = true;	
    	}	
    	box = document.getElementsByName('done');
    	for (var i = 0; i < box.length; i++) {
    		if (box[i].value > aktuelleStunde) {
    		box[i].disabled = true;
    		box[i].checked = false;
    		}	
    	}	
    }
    
    
    
    function activateAll(field) {			
    	/*field[0].disabled=true;*/
    	if (field[0].checked == true) {
    		for (i = 0; i < field.length; i++) {
    			field[i].checked = true;
    		}			
    	}
    	else {
    		for (i = 1; i < field.length; i++) {
    			field[i].checked = false;
    		}		
    	}
    	disableCheckbox();					
    }
    function uncheckAllDone(field) {
    	for (i = 1; i < field.length; i++) {
    		if (field[i].checked == false) {
    			field[0].checked = false;
    			
    			break
    		}
    		else {
    			field[0].checked = true;
    			
    		}
    	}
    }
    style.css
    Code:
    body {
    	padding: 0;
    	width:100%;
    	height:100%;
    } 
    
    table {
    	width: 1200px;	
    	position:relative;	
    }	
    
    .doku {
    	position:absolute;
    	z-index:2;
    	text-align:center;
    	height: 300px;
    	width: 500px;
    	top: 50%;
    	left: 50%;
    	margin-top: -150px; /* height / 2 */
    	margin-left: -250px; /* width / 2 */
    	border: 1px solid #DDD;
    	background: -moz-linear-gradient(top, #EEE, #FFF);    
    	background: -webkit-linear-gradient(top, #eee, #fff);
    	background: -ms-linear-gradient(top, #eee, #fff);
    	background: -o-linear-gradient(top, #eee, #fff);
    	box-shadow: 1px 2px 4px rgba(0,0,0, .2);
    }
    .selectAdd {
    	position:absolute;
    	z-index:2;
    	text-align:center;
    	height: 120px;
    	width: 600px;
    	top: 50%;
    	left: 50%;
    	margin-top: -60px; /* height / 2 */
    	margin-left: -300px; /* width / 2 */
    	border: 1px solid #DDD;
    	background: -moz-linear-gradient(top, #EEE, #FFF);    
    	background: -webkit-linear-gradient(top, #eee, #fff);
    	background: -ms-linear-gradient(top, #eee, #fff);
    	background: -o-linear-gradient(top, #eee, #fff);
    	box-shadow: 1px 2px 4px rgba(0,0,0, .2);
    }
    .selectAddNote {
    	position:absolute;
    	z-index:2;
    	text-align:center;
    	height: 120px;
    	width: 600px;
    	top: 50%;
    	left: 50%;
    	margin-top: -60px; /* height / 2 */
    	margin-left: -300px; /* width / 2 */
    	border: 1px solid #DDD;
    	background: -moz-linear-gradient(top, #EEE, #FFF);    
    	background: -webkit-linear-gradient(top, #eee, #fff);
    	background: -ms-linear-gradient(top, #eee, #fff);
    	background: -o-linear-gradient(top, #eee, #fff);
    	box-shadow: 1px 2px 4px rgba(0,0,0, .2);
    }
    
    .picCheck {
    	float: left;
    	margin-left: 20px;
    }
    .picCancel {
    	float: right;
    	margin-right: 20px;
    }
    .ok {
    
    }
    .addNote {
    
    	float: right;
    }

  8. #8
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: TypeError: this.form is null

    Also was auffällt ist, dass das Formular an einer Stelle ist, wo es nicht hin darf. Ohne das jetzt genau analysiert zuhaben, wenn ich das Formular an einer richtigen Stelle einbaue scheint es ohne Fehlermeldungen zu funktionieren.

    Vermutlich hängt das mit dem unnötigen Formular zusammen, dass du in createSelectAddNote() einbaust.

  9. #9
    tatata ist offline Grünschnabel
    registriert
    07-11-2013
    Beiträge
    6

    AW: TypeError: this.form is null

    Wie kann ich denn sehen an welcher stelle das Formular ist und wie hast du es an einer richtige Stelle eingebaut?

  10. #10
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: TypeError: this.form is null

    Sehen kann du es, wenn du z.b. einen Validator benutzt (The W3C Markup Validation Service) aber das das Formular an der falschen Stelle ist, ist klar, zwischen einem TR und einem TD darf kein anderes Element sein.

  11. #11
    tatata ist offline Grünschnabel
    registriert
    07-11-2013
    Beiträge
    6

    AW: TypeError: this.form is null

    Ok, danke.
    Wenn ich form um die ganze Tabelle mache funktioniert es.
    Jetzt muss ich den Checkboxen nur noch Namen nach Zeilen geben dann sollte alles klappen.

Ähnliche Themen

  1. TypeError bei XML Request
    Von Iago im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 16-09-2013, 12:37
  2. TypeError: $(".map") is null
    Von Johannes123 im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 04-10-2012, 23:41
  3. Antworten: 1
    Letzter Beitrag: 12-04-2012, 00:25
  4. Antworten: 7
    Letzter Beitrag: 20-08-2009, 20:46
  5. 'null' ist Null oder kein Objekt
    Von ickzorge im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 19-12-2008, 16:35

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •