Tekst uit textbox halen

geertd · 17 mei 2010

Hallo allemaal,

Ik heb nog zo goed als geen ervaring met Javascript, en probeer het dus te doen mijn mijn kennis in PHP. Nu heb ik op een website een (volgens mij opensource) scriptje gevonden voor een afteller tot een bepaalde datum. Maar nu wil ik dat aanpassen zodat je zelf een ander tijdstip kunt instellen. Zodra je iets invult moet de teller automatisch de tijd herberekenen.

Dit is wat ik nu heb:

HTML:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Tijd-Afteller</title>
</head>

<body onLoad="countdown()" ;>
<div style="position: absolute; width: 210px; height: 100px; z-index: 2; left: 224px; top: 24px" id="afteller">
<!-- Begin Countdown --> <center>&nbsp;</center>
 
<small>
 
					<p align="center">
 
<script type="text/javascript"> 
	var maand = (document.getElementById('maand').value);
	var datum = parseInt(document.getElementById('datum').value);
	var jaar = parseInt(document.getElementById('jaar').value);
	var uur = parseInt(document.getElementById('uur').value);
	var minuut = parseInt(document.getElementById('minuut').value);
	var seconde = parseInt(document.getElementById('seconde').value);
// verander hieronder de datum waarnaar afgeteld moet worden
  var end = new Date(maand + " " + datum + ", " + jaar + " " + uur + ":" + minuut + ":" + seconde + " GMT");
function toSt2(n) {
  s = "";
  if (n < 10) s += "0";
  return (s + n).toString();
}
function toSt3(n) {
  s = "";
  if (n < 10) s += "00";
  else if (n < 100) s += "0";
  return (s + n).toString();
}
function countdown() {
  d = new Date();
  count = Math.floor(end.getTime() - d.getTime());
  if(count > 0) {
    miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
    seconds = toSt2(count%60); count = Math.floor(count/60);
    minutes = toSt2(count%60); count = Math.floor(count/60);
    hours = toSt2(count%24); count = Math.floor(count/24);
    days = count;
    c1.innerText = days + ' Dagen';
    c2.innerText = hours + ':' + minutes + ':' + seconds + '.' + miliseconds + '';
    setTimeout("countdown()", 50);
  }
}
 
</script>
<SPAN id=c1 
style="FONT: bold 24px verdana; COLOR: red"></SPAN>
<BR>
<SPAN id=c2 
      style="FONT: bold 22px verdana; COLOR: blue">;</SPAN>
 
<br><br><small><font size="2">.</font></small><font size="2" face="Verdana">..</font><font size="2" face="Trebuchet MS">tot 
middernacht vanavond</font></div>


<div style="position: absolute; width: 667px; height: 100px; z-index: 3; left: 15px; top: 152px" id="layer1">
	<font face="Trebuchet MS"><b>Andere datum instellen?</b></font>
    
		<p><font face="Trebuchet MS">datum: <input type="text" value="01" name="datum" id="datum" size="2">&nbsp;&nbsp;&nbsp; 
		maand:<select size="1" name="maand" id="maand">
		<option selected value="January">Januari</option>
		<option value="February">Februari</option>
		<option value="March">Maart</option>
		<option value="April">April</option>
		<option value="May">Mei</option>
		<option value="June">Juni</option>
		<option value="July">Juli</option>
		<option value="August">Augustus</option>
		<option value="September">September</option>
		<option value="October">Oktober</option>
		<option value="November">November</option>
		<option value="December">December</option>
		</select>&nbsp;&nbsp;&nbsp;&nbsp; jaar:<input type="text" name="jaar" value="2011" id="jaar"size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		uur:<input type="text" id="uur" value="00" name="uur" size="2">&nbsp;&nbsp;&nbsp; minuut:<input type="text" value="00" id="minuut" name="minuut" size="2">&nbsp;&nbsp;&nbsp; 
		seconde<input type="text" id="seconde" value="00" name="seconde" size="2"></font></p>
		<p>&nbsp;</div>
</body>

</html>

Met dit krijg ik foutmeldingen over een ontbrekend object in regel 17 karakter 2.
Sowieso werkt het niet.

Weet er iemand hoe ik dit kan oplossen?

Alvast bedankt,

Geert

sunion · 17 mei 2010

(document.getElementById('maand').value)
is al zeker fout, moet gwn
document.getElementById('maand').value
zijn

That Guy · 17 mei 2010

(document.getElementById('maand').value)
is al zeker fout, moet gwn

Nee hoor. Haakjes zorgen er alleen voor dat het prioriteit heeft tijdens het parsen, net zoals met wiskunde.

In ieder geval: het probleem is dat je maand-document-by-id-element een select is. De select tag heeft helemaal geen 'value' - vandaar de error. Je moet zoiets doen:
[JS]document.getElementById('maand').options[document.getElementById('maand').selectedIndex].value;[/JS]:thumb:

geertd · 18 mei 2010

Hey, mijn code werkt nog steeds niet...
Dit is wat ik nu heb:

HTML:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Tijd-Afteller</title>
</head>

<body onLoad="countdown()" ;>
<div style="position: absolute; width: 210px; height: 100px; z-index: 2; left: 224px; top: 24px" id="afteller">
<!-- Begin Countdown --> <center>&nbsp;</center>
 
<small>
 
					<p align="center">
 
<script type="text/javascript"> 
	var maand = document.getElementById('maand').options[document.getElementById('maand').selectedIndex].value;
	var datum = parseInt(document.getElementById('datum').value);
	var jaar = parseInt(document.getElementById('jaar').value);
	var uur = parseInt(document.getElementById('uur').value);
	var minuut = parseInt(document.getElementById('minuut').value);
	var seconde = parseInt(document.getElementById('seconde').value);
// verander hieronder de datum waarnaar afgeteld moet worden
  var end = new Date(maand + " " + datum + ", " + jaar + " " + uur + ":" + minuut + ":" + seconde + " GMT");
function toSt2(n) {
  s = "";
  if (n < 10) s += "0";
  return (s + n).toString();
}
function toSt3(n) {
  s = "";
  if (n < 10) s += "00";
  else if (n < 100) s += "0";
  return (s + n).toString();
}
function countdown() {
  d = new Date();
  count = Math.floor(end.getTime() - d.getTime());
  if(count > 0) {
    miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
    seconds = toSt2(count%60); count = Math.floor(count/60);
    minutes = toSt2(count%60); count = Math.floor(count/60);
    hours = toSt2(count%24); count = Math.floor(count/24);
    days = count;
    c1.innerText = days + ' Dagen';
    c2.innerText = hours + ':' + minutes + ':' + seconds + '.' + miliseconds + '';
    setTimeout("countdown()", 50);
  }
}
 
</script>
<SPAN id=c1 
style="FONT: bold 24px verdana; COLOR: red"></SPAN>
<BR>
<SPAN id=c2 
      style="FONT: bold 22px verdana; COLOR: blue">;</SPAN>
 
<br><br><small><font size="2">.</font></small><font size="2" face="Verdana">..</font><font size="2" face="Trebuchet MS">tot 
middernacht vanavond</font></div>


<div style="position: absolute; width: 667px; height: 100px; z-index: 3; left: 15px; top: 152px" id="layer1">
	<font face="Trebuchet MS"><b>Andere datum instellen?</b></font>
    
		<p><font face="Trebuchet MS">datum: <input type="text" value="01" name="datum" id="datum" size="2">&nbsp;&nbsp;&nbsp; 
		maand:<select size="1" name="maand" id="maand">
		<option selected value="January">Januari</option>
		<option value="February">Februari</option>
		<option value="March">Maart</option>
		<option value="April">April</option>
		<option value="May">Mei</option>
		<option value="June">Juni</option>
		<option value="July">Juli</option>
		<option value="August">Augustus</option>
		<option value="September">September</option>
		<option value="October">Oktober</option>
		<option value="November">November</option>
		<option value="December">December</option>
		</select>&nbsp;&nbsp;&nbsp;&nbsp; jaar:<input type="text" name="jaar" value="2011" id="jaar"size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		uur:<input type="text" id="uur" value="00" name="uur" size="2">&nbsp;&nbsp;&nbsp; minuut:<input type="text" value="00" id="minuut" name="minuut" size="2">&nbsp;&nbsp;&nbsp; 
		seconde<input type="text" id="seconde" value="00" name="seconde" size="2"></font></p>
		<p>&nbsp;</div>
</body>

</html>

De foutmeldingen die IE8 geeft:

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E)
Tijdstempel: Tue, 18 May 2010 05:03:05 UTC

Bericht: Object vereist
Regel: 17
Teken: 2
Code: 0
URI: http://localhost:50/App center/TijdAfteller/index3.php

Bericht: 'end' is leeg of geen object
Regel: 38
Teken: 3
Code: 0
URI: http://localhost:50/App center/TijdAfteller/index3.php

Supersnail · 18 mei 2010

Je gebruikt [js]document.getElementById('maand')[/js] op regel 17, terwijl

HTML:

maand:<select size="1" name="maand" id="maand">

pas op regel 66 staat. Eenzelfde problemen doen zich voor met de andere document.getElementById's. Om dit op te lossen moet je deze regels onderaan zetten.
Ik moest overigens ook [js]c1.innerText = days + ' Dagen';
c2.innerText = hours + ':' + minutes + ':' + seconds + '.' + miliseconds + '';[/js] vervangen door [js]c1.innerHTML = days + ' Dagen';
c2.innerHTML = hours + ':' + minutes + ':' + seconds + '.' + miliseconds + '';[/js]

geertd · 18 mei 2010

Heel erg bedankt, hij werkt!
Nu wil ik alleen nog zorgen dat wanneer je iets aan de tekstvakken/combobox verandert automatisch (zonder te herladen) de teller opnieuw zich aanpast.
Hoe kan ik dat doen? (Liefst zonder button)

Wimpieoh · 20 mei 2010

Plaats op het einde van elke <input type="text"> en <select> de event-handler onchange="start()". Plaats alle JavaScript functies in het header-gedeelte. Maak van var end een globale variabele door deze buiten de functies te plaatsen, omdat deze in twee functies wordt gebruikt. Stop in start() alles om end te vullen alsook de aanroep van countdown() als laatste regel.

Tekst uit textbox halen

geertd

Gebruiker

sunion

Gebruiker

That Guy

Meubilair

geertd

Gebruiker

Supersnail

Terugkerende gebruiker

geertd

Gebruiker

Wimpieoh

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy