Tagesabhängige Div-Inhalte Schalten

T

t.kobler

Neues Mitglied
Hallo Liebes Forum,

ich möchte in einer Html Seite Uhrzeitabhängige Begrüßung und dazu noch <div - Elemente schalten.

Der Quelltext html sieht folgendermaßen aus:
Code: 
<html><head><title> Guten Morgen</title><link rel="stylesheet" href="style.css"
    <script language="JavaScript" type="text/javascript" src="tageszeit.js"></script>
    </head>
<body>
    <h1>Sriptüberschrit-Morgen-Mittag-Abend</h1>
<div id="morgen" hidden>
<iframe src="morgen.pdf" width="50%" height="50%">
</iframe>
</div>
<div id="mittag" hidden>
<iframe src="mittag.pdf" width="50%" height="50%">
</iframe>
</div>
<div id="abend" hidden>
<iframe src="abend.pdf" width="50%" height="50%">
</iframe>
</div>
</body></html>

Die .JS Datei:
Code: 
function Tageszeit(){
var datum = new Date()
var stunde = datum.getHours()
gruss = "Hallo Welt"
if (stunde < 8)
gruss = "Guten Morgen, folgende Dinge bedürfen deiner Aufmerksamkeit:"
show_elements(morgen)
if (8 < stunde <17 )
gruss = "Hallo"
show_elements(mittag)
if (stunde > 17)
gruss = "Guten Abend"
show_elements(abend)
}
Tageszeit();

Die Begrüßung funktionierte mit document.write noch relativ gut. allerdings wie bringe ich die Begrüßung zur Überschrift?
und des weiteren sollte zu jeder if (stunde....
der entsprechende div bereich freigeschaltet werden.
mit einem link "OnCLick" funktionierte das ja ganz gut -
<img src="morgen.png" onclick="document.getElementById('morgen').style.display=document.getElementById('morgen').style.display=='block' ? 'none' : 'block';" alt="" border="" height="50px" width="50px"/>
nur wie verbaue ich das in meiner tageszeit.js.

Ich würde mich freuen wenn ihr mir weiterhelfen könnt.
schöne Grüße
 
mihe7

mihe7

Top Contributor
t.kobler hat gesagt.:
Die Begrüßung funktionierte mit document.write noch relativ gut. allerdings wie bringe ich die Begrüßung zur Überschrift?
Zum Vergrößern anklicken....
Javascript: 
document.querySelector('h1').innerText = gruss;
t.kobler hat gesagt.:
und des weiteren sollte zu jeder if (stunde....
der entsprechende div bereich freigeschaltet werden.
Zum Vergrößern anklicken....
Ich würde nur ein div verwenden und die Inhalte je if festlegen. In deinem Fall unterscheidet sich der Spaß sowieso nur im Dateinamen, so dass Du das einfach in eine Funktion ausgliedern kannst.

So in etwa (Achtung, kann Fehler enthalten) könntest Du den betreffenden iframe zum gegebenen parent-Element hinzufügen:
Javascript: 
function addIframe(parent, src) {
     const iframe= document.create("iframe");
     iframe.src= src;
     iframe.width = "50%";
     iframe.height = "50%";
     parent.innerHTML='';
     parent.appendChild(iframe);
}
 
MoxxiManagarm

MoxxiManagarm

Top Contributor
Vielleicht solltest du erstmal Klammern setzen.

Code: 
if (stunde < 8)
gruss = "Guten Morgen, folgende Dinge bedürfen deiner Aufmerksamkeit:"
show_elements(morgen)
Nur die erste Zeile gehört zur Bedingung
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
G java an aus schalten im ie6 Angular, React, JQuery - Fragen zu JavaScript 8

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben