PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [JS] Feld eigenschaften nicht richtig erkannt


nul
26-07-2005, 11:26
Anfaenglich gesagt, ich hab gestern meine ersten "tiefen" kontakte mit Javascript geschlossen und habe nun folgendes Problem. FF. Dateien sollen eine Tabelle mit zwei Input Feldern darstellen, wenn man auf den Text daneben klickt soll der Kalender aufgehn und den Wert im danebenstehenden input-feld eintragen. Soweit sogut, ich habe aber noch 2 Fehler, bei denen ich nicht weiterkomme:

1. Die Kompletten Tage unterhalb von Mittwoch reagieren auf keine klicks, sie sind, ich weiss nicht .... ? Sieht da jemand was?
2. Schreiben tut er immer nur ins 2. Input feld, ich versteh grundsaetzlich auch warum, aber nicht wie ich das umgehen kann...

Auf jedenfall folgen hier die Dateien.

1. Die Html-Datei, die angezeit wird:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>
Kalender
</title>
<script language="JavaScript1.5" src="kalender2.js"></script>
<script language="JavaScript1.5">
index = 0;
felder = [];
</script>
</head>
<body>
<!-- testlayout zur demonstration [ anfang ] -->
<table border="1">
<tr>
<td>
<span onClick="KalenderAnzeigen()">
Timer open
</span>
</td>
<td>
<form name="form1">
<input type="text" name="formtext1" value="">
<script language="JavaScript1.5">
felder.push( document.form1.formtext1 );
index++;
</script>
<?php include( 'kalenderModul.php' ); ?>
</form>
</td>
</tr>
<tr>
<td>
<span onClick="KalenderAnzeigen()">
Timer open2
</span>
</td>
<td>
<form name="form2">
<input type="text" name="formtext2" value="">
<script language="JavaScript1.5">
felder.push( document.form2.formtext2 );
index++;
</script>
<?php include( 'kalenderModul.php' ); ?>
</form>
</td>
</tr>
</table>
<!-- testlayout zur demonstration [ ende ] -->
</body>
</html>

2.Die Datei, die von 1 eingebunden wird, damit der Kalender geschrieben wird.

<!-- kalender [ anfang ] -->
<div id="KalenderAnzeige" style="background-color:white; width:210px; height:169px; position:absolute; left:0px; top:0px; z-index:1; layer-background-color:white; visibility:hidden;">
<!-- kalenderkopf [ anfang ] -->
<table style="font-family:Arial,sans-serif; font-size:10px; color:black;" border="0" cellpadding="0" cellspacing="1" width="210">
<tr>
<td width="30" height="20" align="center" valign="middle" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;" onMouseover="this.bgColor='#FF0000'" onMouseout="this.bgColor=''" onMouseup="Blatt('pre')">
<p align="center">&lt;&lt;</p>
</td>
<td width="150" height="20" align="center" valign="middle" colspan="5" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;" onMouseover="KalenderSchliessen('over')" onMouseout="KalenderSchliessen('out')" onMouseup="KalenderSchliessen('up')">
<p align="center"><span id="MonatsAnzeige">&nbsp;</span>&nbsp;&nbsp;<span id="JahresAnzeige">&nbsp;</span></p>

</td>
<td width="30" height="20" align="center" valign="middle" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;" onMouseover="this.bgColor='#FF0000'" onMouseout="this.bgColor=''" onMouseup="Blatt('next')">
<p align="center">&gt;&gt;</p>
</td>
</tr>
<tr>
<td width="30" height="20" align="center" valign="middle" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid;">
<p align="center">Mo.</p>

</td>
<td width="30" height="20" align="center" valign="middle" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid;">
<p align="center">Di.</p>
</td>
<td width="30" height="20" align="center" valign="middle" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid;">
<p align="center">Mi.</p>
</td>
<td width="30" height="20" align="center" valign="middle" s????¸?tyle="border-width:1px; border-color:rgb(102,102,102); border-style:solid;">

<p align="center">Do.</p>

</td>
<td width="30" height="20" align="center" valign="middle" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid;">
<p align="center">Fr.</p>
</td>
<td width="30" height="20" align="center" valign="middle" bgcolor="#CCCCCC" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid;">
<p align="center">Sa.</p>

</td>
<td width="30" height="20" align="center" valign="middle" bgcolor="#999999" style="border-width:1px; border-color:rgb(102,102,102); border-style:solid;">
<p align="center">So.</p>
</td>
</tr>
<!-- kalenderkopf [ ende ] -->
<script language="JavaScript1.5">
<!--
// tage des kalenders [ anfang ]
var b = 1;
for(var a=1; a<=6; a++) {
document.writeln("<tr>");
document.writeln("<td width=\"30\" height=\"20\" align=\"center\" valign=\"middle\" style=\"border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;\" onMouseover=\"this.bgColor='#FF0000'\" onMouseout=\"this.bgColor=''\" onMouseup=\"Datum("+ b +", felder[index-1] )\">");
document.writeln("<p id=\"TF_"+ b +"\" align=\"center\">"+ b +"<\/p>");
document.writeln("<\/td>");
b++;
document.writeln("<td width=\"30\" height=\"20\" align=\"center\" valign=\"middle\" style=\"border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;\" onMouseover=\"this.bgColor='#FF0000'\" onMouseout=\"this.bgColor=''\" onMouseup=\"Datum("+ b +", felder[index-1] )\">");
document.writeln("<p id=\"TF_"+ b +"\" align=\"center\">"+ b +"<\/p>");
document.writeln("<\/td>");
b++;
document.writeln("<td width=\"30\" height=\"20\" align=\"center\" valign=\"middle\" style=\"border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;\" onMouseover=\"this.bgColor='#FF0000'\" onMouseout=\"this.bgColor=''\" onMo????¸?useup=\"Datum("+ b +", felder[index-1] )\">");
document.writeln("<p id=\"TF_"+ b +"\" align=\"center\">"+ b +"<\/p>");
document.writeln("<\/td>");
b++;
document.writeln("<td width=\"30\" height=\"20\" align=\"center\" valign=\"middle\" style=\"border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;\" onMouseover=\"this.bgColor='#FF0000'\" onMouseout=\"this.bgColor=''\" onMouseup=\"Datum("+ b +", felder[index-1] )\">");
document.writeln("<p id=\"TF_"+ b +"\" align=\"center\">"+ b +"<\/p>");
document.writeln("<\/td>");
b++;
document.writeln("<td width=\"30\" height=\"20\" align=\"center\" valign=\"middle\" style=\"border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;\" onMouseover=\"this.bgColor='#FF0000'\" onMouseout=\"this.bgColor=''\" onMouseup=\"Datum("+ b +", felder[index-1] )\">");
document.writeln("<p id=\"TF_"+ b +"\" align=\"center\">"+ b +"<\/p>");
document.writeln("<\/td>");
b++;
document.writeln("<td width=\"30\" height=\"20\" align=\"center\" valign=\"middle\" bgcolor=\"#CCCCCC\" style=\"border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;\" onMouseover=\"this.bgColor='#FF0000'\" onMouseout=\"this.bgColor='#CCCCCC'\" onMouseup=\"Datum("+ b +", felder[index-1] )\">");
document.writeln("<p id=\"TF_"+ b +"\" align=\"center\">"+ b +"<\/p>");
document.writeln("<\/td>");
b++;
document.writeln("<td width=\"30\" height=\"20\" align=\"center\" valign=\"middle\" bgcolor=\"#999999\" style=\"border-width:1px; border-color:rgb(102,102,102); border-style:solid; cursor:pointer;\" onMouseover=\"this.bgColor='#FF0000'\" onMouseout=\"this.bgColor='#999999'\" onMouseup=\"Datum("+ b +", felder[index-1] )\">");
document.writeln("<p id=\"TF_"+ b +"\" align=\"center\">"+ b +"<\/p>");
document.writeln("<\/td>");
document.writeln("<\/tr>");
b++;
}
// tage des kalenders [ ende ]

// browser erkennung [ anfang ]
var agt=navigator.userAgent.toLowerCase();
var is_ie = (agt.indexOf("msie") != -1);
var is_nn = (agt.indexOf("netscape") != -1);
var is_op = (agt.indexOf("opera") != -1);
var is_ff = (agt.indexOf("firefox") != -1);
if(is_op) {
is_ie = false;
is_nn = false;
is_ff = false;
}
// browser erkennung [ ende ]

// aktuelles datum ermitteln und an kalender übergeben [ anfang ]
var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if(dj < 999) dj+=1900;
Kalender(dm,dj);
// aktuelles datum ermitteln und an kalender übergeben [ ende ]

// -->
</script>
</table>
</div>
<!-- kalender [ ende ] -->

und 3. die verwendeten funktionen:

// kalender positionieren und öffnen [ anfang ]
function KalenderAnzeigen() {
if ( is_ie ) {
oeffnewindow(window.event.clientX,window.event.cli entY);
} else {
document.onclick = toolopener_ne;
}
}

function toolopener_ne(e) {
oeffnewindow(e.pageX,e.pageY);
document.onclick = false;
}

function leftwindow(x,width) {
if (is_ie) {
if(document.body.offsetWidth < x+width) {
var left = x-width;
} else {
var left = x;
}
}
else {
if(window.innerWidth < x+width) {
var left = x-width;
} else {
var left = x;
}
}
return left;
}

function topwindow(y,height) {
if (is_ie) {
if(document.body.offsetHeight < y+height) {
var top = y-height;
} else {
var top = y;
}
}
else {
if(window.innerHeight < y+height) {
var top = y-height;
} else {
var top = y;
}
}
return top;
}

function oeffnewindow(x,y) {
var width = eval(document.getElementById("KalenderAnzeige").style.width.slice(0,-2));
var height = eval(document.getElementById("KalenderAnzeige").style.height.slice(0,-2));
var left = leftwindow(x,width);
var top = topwindow(y,height);
document.getElementById("KalenderAnzeige").style.left = left;
document.getElementById("KalenderAnzeige").style.top = top;
document.getElementById("KalenderAnzeige").style.visibility = "visible";
}
// kalender positionieren und öffnen [ ende ]

// kalender schliessen und monate umblättern [ anfang ]
function KalenderSchliessen(Wert) {
switch(Wert) {
case "over":
tempMonat = document.getElementById("MonatsAnzeige");
tempMonat = tempMonat.firstChild.nodeValue;
tempJahr = document.getElementById("JahresAnzeige");
tempJahr = tempJahr.firstChild.nodeValue;
document.getElementById("MonatsAnzeige").firstChild.data = "Timer";
document.getElementById("JahresAnzeige").firstChild.data = "close";
break;
case "out":
document.getElementById("MonatsAnzeige").firstChild.data = tempMonat;
document.getElementById("JahresAnzeige").firstChild.data = tempJahr;
break;
case "up":
document.getElementById("MonatsAnzeige").firstChild.data = tempMonat;
document.getElementById("JahresAnzeige").firstChild.data = tempJahr;
document.getElementById("KalenderAnzeige").style.visibility = "hidden";
break;
}
}

function Blatt( pn ) {
switch(pn) {
case "pre":
if(dm == 1) {
dm = 12;
dj = dj-1;
} else {
dm = dm-1;
dj = dj;
}
break;
case "next":
if(dm == 12) {
dm = 1;
dj = dj+1;
} else {
dm = dm+1;
dj = dj;
}
break;
}
document.getElementById("TF_"+ FeldzahlHeute).style.background = "";
Kalender(dm,dj);
}
// kalender schliessen und monate umblättern [ ende ]

// datums übergabe an formfeld [ anfang ]
function Datum(Wert, field ) {
if(document.getElementById("TF_"+ Wert).firstChild.data != "") {
if(document.getElementById("TF_"+ Wert).firstChild.data <= 9) {
var TagU = "0"+document.getElementById("TF_"+ Wert).firstChild.data;
} else {
var TagU = document.getElementById("TF_"+ Wert).firstChild.data;
}
if(dm <= 9) {
var MonU = "0"+dm;
} else {
var MonU = dm;
}
field.value = TagU+"."+MonU+"."+dj;
// document.form1.formtext1.value = TagU+"."+MonU+"."+dj;
document.getElementById("KalenderAnzeige").style.visibility = "hidden";
}
}
// datums übergabe an formfeld [ ende ]


// kalender berechnung [ anfang ]
function Kalender(Monat,Jahr) {
Monatsname = new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
Tag = new Array ("Mo","Di","Mi","Do","Fr","Sa","So");

var jetzt = new Date();
var DieserMonat = jetzt.getMonth() + 1;
var DiesesJahr = jetzt.getYear();
if(DiesesJahr < 999) DiesesJahr+=1900;
var DieserTag = jetzt.getDate();
var Zeit = new Date(Jahr,Monat-1,1);
var Start = Zeit.getDay();
if(Start > 0) Start--;
else Start = 6;
var Stop = 31;
if(Monat==4 ||Monat==6 || Monat==9 || Monat==11 ) Stop--;
if(Monat==2) {
Stop = Stop - 3;
if(Jahr%4==0) Stop++;
if(Jahr%100==0) Stop--;
if(Jahr%400==0) Stop++;
}

document.getElementById("MonatsAnzeige").firstChild.data = Monatsname[Monat-1];
document.getElementById("JahresAnzeige").firstChild.data = Jahr;

var Tageszahl = 1;
var Feldzahl = 1;
for(var i=0;i<=5;i++) {
for(var j=0;j<=5;j++) {
if((i==0)&&(j < Start)) {
document.getElementById("TF_"+ Feldzahl).firstChild.data = "";
Feldzahl++;
}
else {
if(Tageszahl > Stop) {
document.getElementById("TF_"+ Feldzahl).firstChild.data = "";
Feldzahl++;
}
else {
if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag)) {
document.getElementById("TF_"+ Feldzahl).firstChild.data = Tageszahl;
document.getElementById("TF_"+ Feldzahl).style.background = "#00FF00";
FeldzahlHeute = Feldzahl;
Feldzahl++;
}
else {
document.getElementById("TF_"+ Feldzahl).firstChild.data = Tageszahl;
Feldzahl++;
}
Tageszahl++;
}
}
}
if(Tageszahl > Stop) {
document.getElementById("TF_"+ Feldzahl).firstChild.data = "";
Feldzahl++;
}
else {
if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag)) {
document.getElementById("TF_"+ Feldzahl).firstChild.data = Tageszahl;
Feldzahl++;
}
else {
document.getElementById("TF_"+ Feldzahl).firstChild.data = Tageszahl;
Feldzahl++;
}
Tageszahl++;
}
}
}
// kalender berechnung [ ende ]

Vielleicht kann sich das jemand mal anschauen,
ich sag im Voraus schon mal DANKE!!!

mfg nul
nul
26-07-2005, 12:26
OK, Nr. 1 hat sich erledigt, das Problem lag darin, dass Dreamweaver beim Kopieren an bestimmte stellen ????.?? usw. eingefuegt hat, nach dem Loeschen bleibt nur mehr 2 uebrig, bitte deshalb erneut um Hilfe.