Javascript-forum
Bitte um Hilfe - Kalenderprojekt - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Bitte um Hilfe - Kalenderprojekt (/showthread.php?tid=2688)

Bitte um Hilfe - Kalenderprojekt - Javafan - 06.12.2023

Moin,
ich suche Hilfe als Java-Unbedarfter, da ich anscheinend die einfachsten Funktionen nicht fehlerfrei hinbekomme.

Ich stricke an einem Kalenderprojekt, das Datumsangaben aus verschiedenen Kalendern umrechnen kann. Derzeit versuche ich, einen bereits bestehenden Datumsrechner für meine Zwecke umzumodeln.

Ich habe eine Ein-/Ausgabemaske in HTML. Zuerst soll nur ein Wert in ein definiertes Eingabefeld eingegeben werden, der nach Klick auf einen Button in ein definiertes Ausgabefeld übetragen und angezeigt wird. Ich möchte dazu die Funktionen
document.getElementById("XYZ").value

zum Einlesen und

document.getElementById("ABC").innerHTML = ABC

zur Ausgabe nutzen. Klappt aber leider nicht ;-)

Vielleicht ist jemand so nett und hilft mir mal über diese Schwelle....

Dateiaustausch gerne über PM.

Danke! Big Grin

RE: Bitte um Hilfe - Kalenderprojekt - rzscout - 07.12.2023

Hi Javafan ,
ersteinmal darf ich dich aufklären. Java und JavaScript sind zwei verschiedene Sprachen und haben außer der ähnlichen Syntax nichts miteinander zu tun. Auch wenn beide Sprachen aus der gleichen Sprachfamilie C stammen.

Das Auslesen aus einem Input-Element geht relativ einfach. mithilfe der value-Methode können Daten entweder ausgelesen oder verändert werden.

Hier ein Beispiel von mir:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auslesen und Verarbeiten von Daten</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let meinInput = document.getElementById('meinInput');
            let btn = document.getElementById('btn');
            let ausgabe = document.getElementById('ausgabe');

            btn.addEventListener('click', function () {
               ausgabe.innerHTML = meinInput.value;
            });
        });
    </script>
</head>
<body>
    <input type="text" id="meinInput">
    <button id="btn">Drück mich!</button>
    <div id="ausgabe"></div>
</body>
</html>

Versuche mal den oberen Code anzuwenden. In diesem Code sind zwei EventListener. Der Erste davon schaut ob das Dokument vollständig geladen wurde also auch die einzelnen Elemente wie Input etc. Der Zweite reagiert auf ein click-Event und führt eine Funktion durch, wo die Eingabe gelesen wird und als innerHTML in ausgabe ausgegeben wird.

Ich hoffe das Beispiel hilft dir weiter!

VG scoutrz

RE: Bitte um Hilfe - Kalenderprojekt - Javafan - 21.12.2023

Dabke, habe dir eine PN geschickt. Ich habe versucht, Dein Beispiel mit meinem HTML-Code zu verheiraten. Die Eingabe soll im linken Datumsfeld erfolgen. Wenn der Button A gedrückt wird, soll der Wert in das rechte Datumsfenster geschrieben werden. Klappt leider nicht:

<!DOCTYPE html>

<head>
<title>Datumsrechner</title>
<meta charset="UTF-8">

<style>

div { position:absolute; border:none; margin:0px; padding:0px; }

p { position:absolute; border:none; margin:0px; padding:0px; font-size:24px; font-familyConfusedans-serif; }

form { border:none; margin:0px; padding:0px; font-size:24px; font-familyConfusedans-serif; }

input { position:absolute; border-styleConfusedolid; border-size:2px; border-color:black; margin:0px; padding:0px; text-align:center; font-size:24px; font-familyConfusedans-serif; }

select { position:absolute; border-styleConfusedolid; border-size:2px; border-color:black; margin:0px; padding:0px; text-align:center; font-size:16px; font-familyConfusedans-serif; }

.butt { position:absolute; right:10px; width:44px; text-align:center; background-color:#598359; border: 2px solid #598359; border-style:outset; border-radius:10px;}

.link { position:absolute; width:175px; height:37px; text-align:center; background-color:#d9d9d9; border: 2px solid #b3b3b3; border-style:outset; }

.eingabe { position:absolute; text-align:center; }

</style>

</head>



<body style="background-color:#bbbbbb">

<div style="width:100%;">

<div style="position:relative; width:620px; margin-left:auto; margin-right:auto;">

<h1 style="position:absolute; top:-28px; width:620px; font-size:36px; font-familyConfusedans-serif; text-align:center;">
Datumsrechner</h1>

<form>

<div style="top:75px; width:300px;">

<img src="zurueck.gif" alt="" style="position:absolute; top:3px; left:60px;">

<input type="button" style="top:3px; left:60px; height:29px; width:29px; z-index:9; background-color:transparent; border-style:none;" onclick="zurueck()">

<p style="top:4px; width:300px; text-align:center;">- 1 Tag</p>



<!-- KALENDER A -->

<div id="lemrahmen" style="top:40px; width:293px; height:404px; border-styleConfusedolid; border-width:4px; border-color:black; background-color:white;">

<p style="top:37px; width:292px; font-weight:bold; text-align:center;" id="lemtag">WOCHENTAG</p>

<input type="text" id="lemdatum" style="top:75px; left:96px; width:100px; height:100px; font-size:80px; font-weight:bold;" maxlength="2">

<input type="button" id="lembdatum" class="butt" value="A" style="top:129px; height:113px;" onclick="ein1()">

<input type="text" id="lemmonat" style="top:187px; left:74px; width:150px; font-weight:bold;" maxlength="10">

<input type="text" id="lemjahr" style="top:226px; left:74px; width:150px; font-weight:bold;" maxlength="12">

</div>

<div id="lembalken" style="top:40px; width:300px; height:34px; background-color:black;">
<p style="width:300px; top:2px; text-align:center; color:white;"><b>KALENDER A</b></p>
</div> </div>


<div style="top:75px; left:320px; width:300px;">

<img src="vor.gif" alt="" style="position:absolute; top:3px; right:60px;">

<input type="button" style="top:3px; right:60px;height:29px; width:29px; z-index:10; background-color:transparent; border-style:none;" onclick="vor()">

<p style="top:4px; width:300px; text-align:center;">+ 1 Tag</p>





<!-- KALENDER B -->


<div id= "grahmen" style="top:40px; width:293px; height:404px; border-styleConfusedolid; border-width:4px; border-color:black; background-color:white;">

<p style="top:37px; width:292px; font-weight:bold; text-align:center;" id="gtag">WOCHENTAG</p>

<input type="text" id="terradatum" style="top:75px; left:96px; width:100px; height:100px; font-size:80px; font-weight:bold;" maxlength="2">

<input type="button" id="terrabuttondatum" class="butt" value="B" style="top:129px; height:113px;" onclick="ein4()">

<input type="text" id="terramonat" style="top:187px; left:74px; width:150px; font-weight:bold;" maxlength="10">

<input type="text" id="terrajahr" style="top:226px; left:74px; width:150px; font-weight:bold;" maxlength="12">

</div>

<div id="terrabalken" style="top:40px; width:300px; height:34px; background-color:black;">

<p style="width:300px; top:2px; text-align:center; color:white;"><b>KALENDER B</b></p>
</div> </div>


</form>

</div>

</div>

<script>

// BEGINN SCRIPT

document.addEventListener("DOMContentLoaded", function() {
let lemdatum = document.getElementById('lemdatum');
let lembdatum = document.getElementById('lembdatum');
let lemdatum = terradatum;

lembdatum.addEventListener('click', function () {
document.getElementById("terradatum").innerHTML = "";
});
});

//ENDE SCRIPT



</script>



</body>

</html>

RE: Bitte um Hilfe - Kalenderprojekt - rzscout - 28.12.2023

Ich habe da mal was heraus gesucht, ich hoffe es hilft dir weiter:

Code:
// Funktion zur Umrechnung von gregorianischem zu julianischem Datum
function gregorianToJulian(year, month, day) {
  // Wenn es vor dem Wechsel zum gregorianischen Kalender im Jahr 1582 liegt
  if (year < 1582 || (year === 1582 && (month < 10 || (month === 10 && day <= 4)))) {
    return { year: year, month: month, day: day }; // Keine Umrechnung erforderlich
  }

  // Umrechnung des Datums gemäß der Formel für den Wechsel zum gregorianischen Kalender
  let a = Math.floor((14 - month) / 12);
  let y = year + 4800 - a;
  let m = month + 12 * a - 3;
  let JDN = day + Math.floor((153 * m + 2) / 5) + 365 * y + Math.floor(y / 4) - Math.floor(y / 100) + Math.floor(y / 400) - 32045;

  // Berechnung des Datums im julianischen Kalender
  let jYear = Math.floor((JDN - 1721425.5) / 365.25);
  let jDay = JDN - Math.floor(jYear * 365.25) + 1721425.5;

  return { year: jYear, day: jDay };
}

// Beispielaufruf
let gregorianDate = { year: 2023, month: 12, day: 24 };
let julianDate = gregorianToJulian(gregorianDate.year, gregorianDate.month, gregorianDate.day);
console.log(julianDate);