[JavaScript/ HTML] Form gek gedrag of verklaarbaar?

[Stekeltje]

Ik ben bezig met een kleine calculator, deze calculator moet text omzetten naar getallen en een kleine berekening doen.

Zo gezegd zo gedaan zou je zeggen?

Allereerst post ik mijn code even, deze staat tijdelijk in de header van mijn html pagina.

JavaScript:

function calc()
{   
    var testVar = "";
    testVar = document.forms['inputBox'].elements['countLights'].value;
    //outputBox.newEnergy.innerHMTL = '200';
    alert("Hoi het javascript werkt?" + testVar);
}

In mijn body heb ik het volgende stukje staan:

HTML:

<div id="inputbox">
    <form name="inputBox" action="">
        <table width="850px">
        <tr>
            <td>How many <b>streetlights</b> are you going to use?</td>
            <td><input type="text" id="countLights" name="countLights" value="200" size="5" align="right"/> pcs</td>
                        <td style="border-left:solid 1px #cfcfcf;"></td>
                </tr>

Wat er gebeurd: ik krijg mooi een alert met daarin: "Hoi het javascript werkt? undefined".

Waarom komt er op deze plek geen 200 te staan zoals je zou verwachten. Dit is mijn eerste zelf gebrouwen javascript dus ik zal vast iets verkeerds doen. Ik krijg het NIET gevonden op google. Mis ik wat zoek woorden?

Ik zoek op: how to fix value input tag undefined en variaties daarop.

[RM-rf]

Wat doet de functie "getValue()" ?
het lijkt me dat daarin ergens wat foutgaat of mogelijk zelfs ben je vergeten die functie te definieren.

als het verder enkel gaat om het overnemen van de waarde van diie inputbox, zou ook

JavaScript:

testVar = document.forms['inputBox'].elements['countLights'].value ;

moeten voldoen

[ Voor 41% gewijzigd door RM-rf op 24-02-2012 10:22 ]

[Stekeltje]

F*ck verkeerde code, moment pas hem even aan

Dit is de goede:

JavaScript:

function calc()
{   
    var testVar = "";
    testVar = document.forms['inputBox'].elements['countLights'].value;
    //outputBox.newEnergy.innerHMTL = '200';
    alert("Hoi het javascript werkt?" + testVar);
}

edit:
Nee dat werkt dus niet op de een of andere manier, dat is ook het enige wat ik kan vinden op google ?

[ Voor 18% gewijzigd door Stekeltje op 24-02-2012 10:24 ]

[Joolee]

Installeer eens Firebug of andere debug software en voer dan uit: console.debug(document);
Dan kun je zelf bladeren naar document.forms[... enz. en zien of er wel bestaat wat je probeert te benaderen.

[RM-rf]

Stekeltje schreef op vrijdag 24 februari 2012 @ 10:23:
F*ck verkeerde code, moment pas hem even aan

Dit is de goede:

JavaScript:

function calc()
{   
    var testVar = "";
    testVar = document.forms['inputBox'].elements['countLights'].value;
    //outputBox.newEnergy.innerHMTL = '200';
    alert("Hoi het javascript werkt?" + testVar);
}

edit:
Nee dat werkt dus niet op de een of andere manier, dat is ook het enige wat ik kan vinden op google ?

waneer roep je die functie calc() aan... als die ook in de header aangeroepen wordt, bestaat dat formulier nog niet, dat word pas gerenderd als de hele html gerendert is...
dus bv op een button als onclick event zou je functie wél moeten werken...

als het dat nog steeds niet doet, moet je debuggen door het object terug af te lopen... dus eerst controleren of je functie wél dat form zelf vind dmv

JavaScript:

alert("Hoi het javascript werkt? " + document.forms['inputBox']);

die zou daar [Form Element] moeten teruggeven, als daar al undefined staat betekent dat dat het hele formulier niet gevonden wordt, mogelijk doordat die Name niet uniek is, er meerdere formuleiren met dezelfd naam op die pagina staan.

[Stekeltje]

Joolee schreef op vrijdag 24 februari 2012 @ 10:27:
Installeer eens Firebug of andere debug software en voer dan uit: console.debug(document);
Dan kun je zelf bladeren naar document.forms[... enz. en zien of er wel bestaat wat je probeert te benaderen.

Thanks, ik zocht nog naar een debugger!

RM-rf schreef op vrijdag 24 februari 2012 @ 10:28:
[...]


waneer roep je die functie calc() aan... als die ook in de header aangeroepen wordt, bestaat dat formulier nog niet, dat word pas gerenderd als de hele html gerendert is...
dus bv op een button als onclick event zou je functie wél moeten werken...

als het dat nog steeds niet doet, moet je debuggen door het object terug af te lopen... dus eerst controleren of je functie wél dat form zelf vind dmv

JavaScript:

alert("Hoi het javascript werkt? " + document.forms['inputBox']);

die zou daar [Form Element] moeten teruggeven, als daar al undefined staat betekent dat dat het hele formulier niet gevonden wordt, mogelijk doordat die Name niet uniek is, er meerdere formuleiren met dezelfd naam op die pagina staan.

De functie calc() wordt op de volgende manier aangeroepen:

HTML:

<input type="button" name="button" value="Test" onClick="calc()" />

Ik heb de code aangepast naar wat je zei en ik krijg nu het volgende: "Hoi het javascript werkt? [object HTMLFormElement]"

[Stekeltje]

Heb het gevonden door de debugger! Het zat hem erin dat het element countLights niet uniek was! Thanks iedereen voor het meedenken