tijd weergeven met onclick en weer terug veranderen

[abracadaver909]

Beste helpmij-ers

Ik ben bezig een app te maken en wil daar het volgende in verwerken:

De h1-tag in de header bevat een titel. Als je op de header klikt, moet dat wordt veranderen in de huidige datum en tijd. Als je daarna weer op de header klikt, moet de titel weer terug komen.

Ik heb het javascript functie van internet en werkt prima. Wanneer je op de header klikt, varandert de titel netjes in de datum en tijd.

Maar nu nog dat het weer terugverandert naar de titel met een klik op de header.

Html-code van de header:

 <div data-role="header" id="klokbalk">
    <h1>Titel</h1>
  </div>

Javascript-code van datum-tijd weergave:
[JS]
var Teller=null

function toontijd () {
var nu = new Date()
var maand = nu.getMonth()

if (maand == 0)
maand = "Januari";
else if (maand == 1)
maand = "Februari";
else if (maand == 2)
maand = "Maart";
else if (maand == 3)
maand = "April";
else if (maand == 4)
maand = "Mei";
else if (maand == 5)
maand = "Juni";
else if (maand == 6)
maand = "Juli";
else if (maand == 7)
maand = "Augustus";
else if (maand == 8)
maand = "September";
else if (maand == 9)
maand = "Oktober";
else if (maand == 10)
maand = "November";
else if (maand == 11)
maand = "December";

var datum = nu.getDate()
var dag = nu.getDay()

if (dag == 0)
dag = "Zondag";
else if (dag == 1)
dag = "Maandag";
else if (dag == 2)
dag = "Dinsdag";
else if (dag == 3)
dag = "Woensdag";
else if (dag == 4)
dag = "Donderdag";
else if (dag == 5)
dag = "Vrijdag";
else if (dag == 6)
dag = "Zaterdag";

var uren = nu.getHours()
if (uren <=9)
uren = "0"+uren

var minuten = nu.getMinutes()
if (minuten <=9)
minuten = "0"+minuten

var seconden = nu.getSeconds()
if (seconden <=9)
seconden = "0"+seconden

var tijdWaarde = "" + dag
tijdWaarde += " " + datum
tijdWaarde += " " + maand
tijdWaarde += " " + uren
tijdWaarde += ":"+minuten
tijdWaarde += ":"+seconden
document.getElementById('klokbalk').innerHTML=tijdWaarde;
teller =
setTimeout("toontijd()",1000)
}
[/JS]

Hoe krijg ik de titel weer terug?

Bij voorbaat dank,

Chris Verschoor

 

[ScorpionX]

Aan het begin van je functie kijk je of de klokbalk gelijk is aan de waarde voordat hij een tijd werd.

if(document.getElementById('klokbalk').innerHTML!="Titel"){
document.getElementById('klokbalk').innerHTML="Titel"
}else{
de rest van je functie.
}

dus als hij niet gelijk is aan Titel wanneer de functie start, dan er Titel van maken. Als hij wel al waarde "Titel" heeft dan verder gaan met de functie.

 

[Robin S]

Dan zit je nog steeds met de timer, die iedere seconde de header weer naar de tijd verandert.
Onderstaande code:
- roept clearTimeout aan voor Teller
- verandert alleen de innerHTML van de <h1>, niet van de hele <div>
- heeft een wat compactere, maar als 't goed is net zo functionele, toontijd functie
- is niet getest

Waar je in je oude script naar toontijd verwijst om de titel te veranderen, moet je nu veranderWeergave gebruiken

[JS]var teller = null;
function getHeader() {
return document.getElementById('klokbalk').children[0];
}
function toontijd() {

var nu = new Date();

var dag = ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"][nu.getDay()];
var datum = nu.getDate();
var maand = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"][nu.getMonth()];
var uren = nu.getHours();
var minuten = nu.getMinutes();
var seconden = nu.getSeconds();

if (uren <= 9) uren = "0" + uren;
if (minuten <= 9) minuten = "0" + minuten;
if (seconden <= 9) seconden = "0" + seconden

getHeader().innerHTML = [[dag, datum, maand, uren].join(" "), minuten, seconden].join(":");
teller = setTimeout("toontijd()", 1000);
}
function veranderWeergave() {
var header = getHeader();
if (header.innerHTML == "Titel") {
toontijd();
}
else {
if (teller) clearTimeout(teller);
header.innerHTML = "Titel";
}
}[/JS]

Edit:

regel 3 moet dit zijn:
[JS]return document.getElementById('klokbalk').children[0];[/JS]
... toch?

Jup, thnx!

 

[That Guy]

regel 3 moet dit zijn:

[js]return document.getElementById('klokbalk').children[0];[/js]

... toch?

 

[abracadaver909]

Hallo allemaal,

Bedankt voor de oplossingen!

@ScorpionX: De timer verandert de titel inderdaad elke seconde terug, maar jouw stukje script kan ik ook ergens anders voor gebruiken, dus dank daarvoor!

@Robin S: Jouw stukje werkte perfect en mijn (van internet gekopieerde) script is een stuk korter en overzichtelijker geworden. Dank je wel!

Hiermee dus deze vraag opgelost!