Beginner ==> +5 met knop

Status
Niet open voor verdere reacties.

NickBu

Gebruiker
Lid geworden
14 mrt 2012
Berichten
9
Hallo,

ik ben beginner in Java script omdat dit nuttig is voor op werk...

Nu behelp ik me gewoon met de website w3school.com. Iets heb ik er al zeker kunnen opsteken.
Ik kan met functies werken, maar de return.. ik zie de structuur gewoon niet of hoe het zou moeten lopen.

Heel eenvoudig, ik heb een knop, elke keer ik op die knop druk wordt er 5 opgeteld op mijn afgebeelde variabele.

Onderstaande code zit er ver vanaf, ik doe zelfs nergens de +5 dat besef ik, maar dit is een voorbeeld waar ik al gewoon 1keer 5 kan laten zien.

De fout zal zitten dat de vijf er komt te staan met de functie "GetElementById" en niet met mijn knop. Dat weet ik. Maar met nog een variabele ertussen werk het ook niet.

Ik zie niet, als ik met die knop ga werken, hoe ik de return value kan linken aan mijn "sTekst".

Er zijn waarschijnlijk tal van mogelijkheden, als het kan, gelieve een oplossing/hint in de buurt van mijn gebruikte functies anders ga ik het licht niet zien vrees ik.

<html>
<body>

<h1>Optellen</h1>

<p>Telkens we op de knop drukken tellen we 5 op</p>

<button type="button" onclick="Som">+5</button>

<p id="sTekst"></p>

<script>
function Som()
{
return 5;
}
document.getElementById("sTekst").innerHTML=Som();
</script>
</body>
</html>

 
je zal ergens de waarde moeten opvragen, en bij de opgevraagde waarde 5 tellen ;)
nu geef je alleen de waarde terug maar je haalt de huidige waarde niet op.
function Som()
{
var huidigewaarde= (hier de waarde opvragen
var nieuwewaarde = huidigewaarde + 5;
return nieuwewaarde;
}

in deze richting moet je kijken
 
[JS]var huidig = 0; // hier slaan we de huide waarde in op die ook op het scherm staat
var outputElement = document.getElementById('sTekst'); // haal referentie naar HTML element op

function voeg5toe() /* dit was eerst 'Som()', maar dat is een beetje een rare naam als je er altijd 5 bij optelt */
{
huidig = huidig + 5; // +5

outputElement.innerHTML = huidig; // zet waarde van huidig op het scherm
}[/JS]

edit:
Het idee is om een variabele te gebruiken in plaats van steeds de waarde van het scherm te halen / veranderen / weer neerzetten. Behalve dat het netter is heb je minder onverziene problemen (bijvoorbeeld: als je een waarde van het scherm ophaalt is het een String, niet een Number. Deze 'moet' je eerst parsen).
 
Laatst bewerkt:
Bedankt voor de hulp,

dit doet het hem dus:

<html>
<body>

<h1>Optellen</h1>

<p>Telkens we op de knop drukken tellen we 5 op</p>

<button type="button" onclick="voeg5toe()">+5</button>

<p id="sTekst"></p>

<script>
var huidig =0;
var outputElement = document.getElementById('sTekst');
function voeg5toe() /* dit was eerst 'Som()', maar dat is een beetje een rare naam als je er altijd 5 bij optelt */
{
huidig = huidig + 5; // +5

outputElement.innerHTML = huidig; // zet waarde van huidig op het scherm
}


</script>

</body>

</html>


Ik ben alleen niet mee met deze regel:
var outputElement = document.getElementById('sTekst');

De variabele outputelement krijgt zijn waarde door te gaan kijken bij sTekst met GetElementById?

nadien zetten we met de regel "outputElement.innerHTML = huidig; " de waarde terug op het scherm?

Die innerHTML snap ik misschien nog niet goed (ik kom uit het PLC wereldje de taal is er iets anders)
Gaat deze de variabele, string of getal of wat dan ook gewoon terug omzetten naar 'tekst zal ik zeggen" om af te beelden op het scherm?


Thx voor de hulp al
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan