HTML-Elemente verschwinden

PWL

Hallo,

ich hätte eine Frage:
Ich habe mir einen Kalender in Java-Script programmiert, allerdings gibt es da ein kleines Problem: Sobald ich bei dem Kalender zu blättern anfange, verschwindet der Rest der Seite und ich sehe lediglich den Kalender, was ich eben vermeiden möchte.
Hat jemand eine Idee??
Vielen Dank schonmal!!

Tuxa

Ohne Code wird dir hier niemand konkret weiterhelfen können.
Dass einfach alles verschwindet kann viele Ursachen haben - würde dir einfach mal empfehlen mit Firebug (Firefox Addon) dein Javascript zu debuggen - dann kannste genau sehen bei welcher Zeile das Unglück passiert.

davide

hier http://jsfiddle.net/ kannst du ein _MINIMAL_ beispiel posten

PWL

Hallo,

also hier mein Code:
zuerst der HTML-Teil:

HTML

<html>


	<head>


		<title>JavaScript-Calendar</title>


		<script language="JavaScript" type="text/javascript" src="calendar.js"></script>


	</head>


	<body>


	<table>


		<tr>


			<td>


			


			<script language="javascript">


		Calendar(2011,7);


	</script>


			</td>


			<td><form name="Date" action="">


		<input type="text" size="30" name="output" readonly="readonly"><br>


		<input type="button" value="Go!!" onClick="this.form.output.value='Jetzt steht was drin'">


	<form>


	<a onClick="Date.output.value='Jetzt steht was andres drin'" style="cursor:pointer">Hallo</a></td>


		</tr>


	</table>	


	</body>


</html>

Alles anzeigen

und hier der JS-Teil:

Code

function leapyear (year) {
			if((year % 400) == 0 || ((year % 4) == 0 && (year % 100) != 0)) {
				return true;
			}
			return false;
		}

		function header (year, month) {
			var nameOfMonth = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
			var nameOfDay = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
			if (year < 999) {
				year+=1900;
			}
			document.open();
			document.write("<table border=\"1\">");
			document.write("<tr><td><div align=\"left\">");
			if (month == 0) {
				document.write("<a href=\"javascript:Calendar(" + (year-1) + ", 11)\">&lt;&lt;</a></div></td>");
			}
			else {
				document.write("<a href=\"javascript:Calendar(" + year + ", " + (month-1) + ")\">&lt;&lt;</a></div></td>");
			}
			document.write("<td colspan=\"5\"><div align=\"center\">" + nameOfMonth[month] + " " + year + "</div></td>");
			if (month == 11) {
				document.write("<td><div align=\"right\"><a href=\"javascript:Calendar(" + (year+1) + ", 0)\">&gt;&gt;</a></div></td></tr>");
			}
			else {
				document.write("<td><div align=\"right\"><a href=\"javascript:Calendar(" + year + ", " + (month+1) + ")\">&gt;&gt;</a></div></td></tr>");
			}

			document.write("<tr>");
			for (i = 0; i <= 6; i++) {
				document.write("<td>" + nameOfDay[i] + "</td>");
			}
			document.write("</tr>");			
		}

		function fillTable (year, month) {
			if (year < 999) {
				year+=1900;
			}
			var date = new Date(year, month, 1);
			var dateGermanWeek = new Array(7,1,2,3,4,5,6);
			var numberOfDays;
			if (leapyear(year)) {
				numberOfDays = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
			}
			else {
				numberOfDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
			}
			var counterDaysBefore;
			if (month == 0) {
				counterDaysBefore = numberOfDays[11]-dateGermanWeek[date.getDay()]+2;
			}
			else {
				counterDaysBefore = numberOfDays[month-1]-dateGermanWeek[date.getDay()]+2;
			}			
			var counterDaysMonth = 1;
			var counterDaysAfter = 1;
			for (i = 1; i <= 6; i++) {
				document.write("<tr>");
				for (j = 1; j <= 7; j++) {
					if (i == 1 && j < dateGermanWeek[date.getDay()]) {
						document.write("<td>"+ counterDaysBefore + "</td>");
						counterDaysBefore++;
					}					
					else if (counterDaysMonth <= numberOfDays[month]) {
						document.write("<td>"+ counterDaysMonth +"</td>");
						counterDaysMonth++;
					}
					else {
						document.write("<td>"+ counterDaysAfter +"</td>");
						counterDaysAfter++;
					}
				}
				document.write("</tr>");
			}
			document.write("</table>");
		}

		function Calendar (year, month) {
			header(year, month);
			fillTable(year, month);
			document.close();
		}	


		function toggleDiv(element){
			if(document.getElementById(element).style.display == 'none')
				document.getElementById(element).style.display = 'block';
			else
				document.getElementById(element).style.display = 'none';
		}

Alles anzeigen

Das Unglück passiert, sobald man in dem Kalender blättert!

Vielen Dank schonmal!!

davide

dein problem ist dass du überall document.write verwendest, dadurch wird das gesamte html auf der seite überschrieben, und deine form rechts verschwindet dabei

erstelle ein div mit id "calendar"
und dann anstelle von document.write verwende document.getElementById("calendar").innerHTML = "..."

siehe dazu auch:
http://stackoverflow.com/questions/2487…from-javascript

also zB so:

HTML

<html>


    <head>


        <title>JavaScript-Calendar</title>


        <script language="JavaScript" type="text/javascript" src="calendar.js"></script>


    </head>


    <body>


    <table>


        <tr>


            <td>


            
						<div id="calendar"></div>	
            <script language="javascript">



        Calendar(2011,7);


    </script>


            </td>


            <td><form name="Date" action="">


        <input type="text" size="30" name="output" readonly="readonly"><br>


        <input type="button" value="Go!!" onClick="this.form.output.value='Jetzt steht was drin'">


    <form>


    <a onClick="Date.output.value='Jetzt steht was andres drin'" style="cursor:pointer">Hallo</a></td>


        </tr>


    </table>    


    </body>


</html>

Alles anzeigen

Code

function leapyear (year) {
			if((year % 400) == 0 || ((year % 4) == 0 && (year % 100) != 0)) {
				return true;
			}
			return false;
		}

		function header (year, month) {
			var nameOfMonth = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
			var nameOfDay = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
			if (year < 999) {
				year+=1900;
			}
			calendar_div_content = "";
			calendar_div_content += ("<table border=\"1\">");
			calendar_div_content += ("<tr><td><div align=\"left\">");
			if (month == 0) {
				calendar_div_content += ("<a href=\"javascript:Calendar(" + (year-1) + ", 11)\">&lt;&lt;</a></div></td>");
			}
			else {
				calendar_div_content += ("<a href=\"javascript:Calendar(" + year + ", " + (month-1) + ")\">&lt;&lt;</a></div></td>");
			}
			calendar_div_content += ("<td colspan=\"5\"><div align=\"center\">" + nameOfMonth[month] + " " + year + "</div></td>");
			if (month == 11) {
				calendar_div_content += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + (year+1) + ", 0)\">&gt;&gt;</a></div></td></tr>");
			}
			else {
				calendar_div_content += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + year + ", " + (month+1) + ")\">&gt;&gt;</a></div></td></tr>");
			}

			calendar_div_content += ("<tr>");
			for (i = 0; i <= 6; i++) {
				calendar_div_content += ("<td>" + nameOfDay[i] + "</td>");
			}
			calendar_div_content += ("</tr>");			
		}

		function fillTable (year, month) {
			if (year < 999) {
				year+=1900;
			}
			var date = new Date(year, month, 1);
			var dateGermanWeek = new Array(7,1,2,3,4,5,6);
			var numberOfDays;
			if (leapyear(year)) {
				numberOfDays = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
			}
			else {
				numberOfDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
			}
			var counterDaysBefore;
			if (month == 0) {
				counterDaysBefore = numberOfDays[11]-dateGermanWeek[date.getDay()]+2;
			}
			else {
				counterDaysBefore = numberOfDays[month-1]-dateGermanWeek[date.getDay()]+2;
			}			
			var counterDaysMonth = 1;
			var counterDaysAfter = 1;
			for (i = 1; i <= 6; i++) {
				calendar_div_content += ("<tr>");
				for (j = 1; j <= 7; j++) {
					if (i == 1 && j < dateGermanWeek[date.getDay()]) {
						calendar_div_content += ("<td>"+ counterDaysBefore + "</td>");
						counterDaysBefore++;
					}					
					else if (counterDaysMonth <= numberOfDays[month]) {
						calendar_div_content += ("<td>"+ counterDaysMonth +"</td>");
						counterDaysMonth++;
					}
					else {
						calendar_div_content += ("<td>"+ counterDaysAfter +"</td>");
						counterDaysAfter++;
					}
				}
				calendar_div_content += ("</tr>");
			}
			calendar_div_content += ("</table>");

			calendar_div = document.getElementById("calendar");
			calendar_div.innerHTML = calendar_div_content;
		}

		function Calendar(year, month) {
			header(year, month);
			fillTable(year, month);
		}	


		function toggleDiv(element){
			if(calendar_div.getElementById(element).style.display == 'none')
				calendar_div.getElementById(element).style.display = 'block';
			else
				calendar_div.getElementById(element).style.display = 'none';
		}

Alles anzeigen

PWL

Vielen Dank, hat mir sehr weitergeholfen.

Viele Grüße,

Philipp

PWL

Hallo,
ich stehe nun vor einem neuen, etwas kleinerem Problem, aber ich komme irgendwie nicht drauf.
Der Kalender öffnet sich, sobald man auf ein Icon klickt. Wenn man ein entspr. Datum ausgewählt hat, schließt sich der Kalender wieder. Es soll nun das aktuell selektierte Datum bei wiederholtem Öffnen des Kalenders, also indem man wieder auf das Icon klickt farblich hinterlegt werden.
Hier ist auch schon das Problem. Die Zelle der Tabelle wird nur dann farblich hinterlegt, wenn man einen Monat zurück- und dann wieder vorgeht. Es soll aber auch ohne dieses Blättern funktionieren.

Mein aktueller HTML-Code:

HTML

<html>
	<head>
		<title>JavaScript-Calendar</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script language="JavaScript" type="text/javascript" src="calendar.js"></script>
	</head>
	<body>

		<table>
			<tr>
				<td>Date:</td>
				<td>
					<form name="dateform" action="">
						<input type="text" size="20" name="date"><a href="#" onClick="show('calendar');"><img src="calendar.gif"></a>
					</form>
				</td>
			</tr>

			<tr>
				<td>&nbsp;</td>
				<td>
					<input type="submit" name="check" value="Check Date" onClick="checkDatum()">
				</td>
			</tr>

			<tr>
				<td>&nbsp;</td>
				<td>
					<div id="calendar" style="display:none">
						<script language="javascript">callCalendar();</script>
					</div>
				</td>			
			</tr>

		</table>

	</body>
</html>

Alles anzeigen

Mein aktueller JS-Code:

Code

//überprüft, ob ein bestimmtes Jahr ein Schaltjahr ist 

		function leapyear (year) {
			if((year % 400) == 0 || ((year % 4) == 0 && (year % 100) != 0)) {
				return true;
			}
			return false;
		}

		//definiert den Header des Kalenders, also Monat und Wochentage

		function header (year, month) {
			var nameOfMonth = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
			var nameOfDay = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
			if (year < 999) {
				year+=1900;
			}
			calendarDivContent = "";
			calendarDivContent += ("<div id=\"tab\"><table>");
			calendarDivContent += ("<tr><td><div align=\"left\">");
			if (month == 0) {
				calendarDivContent += ("<a href=\"javascript:Calendar(" + (year-1) + ", 11)\">&lt;&lt;</a></div></td>");
			}
			else {
				calendarDivContent += ("<a href=\"javascript:Calendar(" + year + ", " + (month-1) + ")\">&lt;&lt;</a></div></td>");
			}
			calendarDivContent += ("<td colspan=\"5\"><div align=\"center\">" + nameOfMonth[month] + " " + year + "</div></td>");
			if (month == 11) {
				calendarDivContent += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + (year+1) + ", 0)\">&gt;&gt;</a></div></td></tr>");
			}
			else {
				calendarDivContent += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + year + ", " + (month+1) + ")\">&gt;&gt;</a></div></td></tr>");
			}

			calendarDivContent += ("<tr>");
			for (i = 0; i <= 6; i++) {
				calendarDivContent += ("<td>" + nameOfDay[i] + "</td>");
			}
			calendarDivContent += ("</tr>");			
		}

		//hier werden die einzelnen Tage in die richtigen Zellen eingetragen

		function fillTable (year, month) {
			if (year < 999) {
				year+=1900;
			}			
			var date = new Date(year, month, 1);
			var dateGermanWeek = new Array(7,1,2,3,4,5,6);
			var numberOfDays;
			if (leapyear(year)) {
				numberOfDays = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
			}
			else {
				numberOfDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
			}
			var counterDaysMonth = 1;

			for (i = 1; i <= 5; i++) {
				calendarDivContent += ("<tr>");
				for (j = 1; j <= 7; j++) {
					if (i == 1 && j < dateGermanWeek[date.getDay()]) {
						calendarDivContent += ("<td>&nbsp;</td>");
					}					
					else if (counterDaysMonth <= numberOfDays[month]) {
						if (counterDaysMonth + "." + (month+1) + "." + year == document.dateform.date.value) {
							calendarDivContent += ("<td style=\"background-color:red\"><a onClick=\"dateform.date.value='"+ counterDaysMonth + "." + (month+1) + "." + year +"'; hide('calendar');style=\"cursor:pointer;\">"+ counterDaysMonth +"</a></td>");
						}						
						else {
							calendarDivContent += ("<td><a onClick=\"dateform.date.value='"+ counterDaysMonth + "." + (month+1) + "." + year +"'; hide('calendar'); \" style=\"cursor:pointer\">"+ counterDaysMonth +"</a></td>");
						}
						counterDaysMonth++;
					}
					else {
						calendarDivContent += ("<td>&nbsp;</td>");
					}
				}
				calendarDivContent += ("</tr>");
			}
			calendarDivContent += ("</table></div>");

			calendarDiv = document.getElementById("calendar");
			calendarDiv.innerHTML = calendarDivContent;
		}

		//erzeugt vollständigen Kalender

		function Calendar (year, month) {
			header(year, month);
			fillTable(year, month);
		}

		//diese Funktion ruft den eigentl. Kalender auf

		function callCalendar() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth();

			if (document.dateform.date.value) {
				var string = document.dateform.date.value.replace(/[^0-9^\.]/g, '');
				var split = string.split(".");
				var month = parseInt(split[1] || 0, 10);
				var year = parseInt(split[2] || 0, 10);
			}
			Calendar(year,month);
		}

		//Funktion zum Anzeigen des Kalenders

		function show (div) {
			with(document.getElementById(div).style) {
				if (display == "none") {
					display = "inline";
				}
				else {
					display = "none";
				}
			}
		}

		//Funktion zum Verbergen des Kalenders

		function hide (div) {
			with (document.getElementById(div).style) {
				if (display == "none") {
					display = "none";
				}
				else {
					display = "none";
				}
			}
		}

		//Ermittelt das vollständige Jahr

		function getFullYear(date) {
			if (!date) {
				date = new Date();
			}
			if (typeof date.getFullYear != 'undefined') {
				return date.getFullYear();
			}
			var year = date.getYear();
			if (year < 1000) {
				year += 2000;
			}
			return year;
		}

		//Überprüft, ob ein bestimmtes Datum gültig ist

		function checkDate(string) {
			if(!string) {
				return false;
			}
			string += '';


			string = string.replace(/[^0-9^\.]/g, '');


			var split = string.split(".");
			var day = parseInt(split[0], 10);
			var month = parseInt(split[1] || 0, 10);
			var year = parseInt(split[2] || 0, 10);


			if(isNaN(year)) year = getFullYear();


			var check = new Date(year, month - 1, day);
			var day2 = check.getDate();
			var year2 = getFullYear(check);
			var month2 = check.getMonth() + 1;


			if (year2 == year && month == month2 && day == day2) {
				return true;
			}					
			return false;
		}

		//Aufruf von obiger Funktion

		function checkDatum () {
			if (checkDate(document.dateform.date.value)) {
				alert("Das Datum " + document.dateform.date.value + " ist gültig!");
			}
			else {
				alert("Das Datum ist ungültig!");
			}
		}

Alles anzeigen

Ich hab das komplette Paket auch angehängt.
Vielen Dank schonmal!

ink

Du musst das farblich Markieren des derzeitig ausgewählten Tages _ebenfalls_ mit JavaScript machen, und nicht wie jetzt fix in die calenderDivContent Variable schreiben.

Versehe jeden Tag mit einer eindeutigen id (am besten das Datum des Tages) und markier beim Aufruf von show('calender', 'currentSelectedDate') das <td> Element mit id 'currentSelectedDate' mit document.getElementById('currentSelectedDate').style.backgroundcolor = 'yellow';

HTML-Elemente verschwinden

Maximilian Rupp 27. Dezember 2024 um 00:26

Jetzt mitmachen!

Rechtliches