Kalkulere verdier realtime

Ståle · 17. januar 2007

Jeg vet ikke helt hva det kalles, og har ikke funnet noe på google =/ Men jeg regner det kan fikses med JS

Problemet mitt er at jeg vil ha noen verdier i ett form til å bli automatisk lagt sammen etterhvert som brukeren skriver inn verdier.

Drømmemannen · 18. januar 2007

Forslag:

Klikk for å se/fjerne innholdet nedenfor

<html>
<head>
 <title>Sum</title>
 <script type="text/javascript">

 function sum()
 {
     value1 = document.getElementById( "value1" ).value;
     value2 = document.getElementById( "value2" ).value;

     result = Number( value1 ) + Number( value2 );
     document.getElementById( "result" ).value = result;
 }

 function attachEvents()
 {
     document.getElementById( "value1" ).onkeyup = sum;
     document.getElementById( "value2" ).onkeyup = sum;
 }

 window.onload = attachEvents;

 </script>
</head>
<body>

<ul>
 <li>
   <label for="value1">Verdi 1</label>
   <input type="text" id="value1">
 </li>
 <li>
   <label for="value2">Verdi 2</label>
   <input type="text" id="value2">
 </li>
 <li>
   <label for="result">Resultat</label>
   <input type="text" id="result" readonly="readonly">
 </li>
</ul>

</body>
</html>

Endret 18. januar 2007 av balletryne

Ståle · 20. januar 2007

yes det virket. Tusen takk

20. januar 2007

hmm.. noe slikt som dette trenger jeg

men er det noen som kan lage noe tillegg til disse funksjonene som gjør at jeg kan f.eks kjøre leggTilFelt( "id1" ); leggTilFelt( "id2" ); og så blir feltnene med "id1" og "id2" lagt inn i sum() funksjonen?

ser for meg noe OOP greier, men jeg kan inne javascript OOP

Kagee · 20. januar 2007

Mener du en slags realtime kalulator med et utvidbart antall verdifelter?

Dette er nok mulig, men jeg orker ikke å skrive goden før jeg får bekreftet spørsmålet.

20. januar 2007

ja det er det jeg mener

hadde vært greit med en slik kode =)

Endret 20. januar 2007 av Slettet+142

Drømmemannen · 20. januar 2007

Nok et forslag:

Klikk for å se/fjerne innholdet nedenfor

<html>
<head>
 <title>Sum</title>
 <script type="text/javascript">

 idCounter = 0;

 function sum()
 {
     fieldList = document.getElementById( "fieldList" );
     fields = fieldList.getElementsByTagName( "input" );

     result = 0;

     for ( i = 0; i < fields.length; ++i )
     {
         result += new Number( fields[i].value );
     }

     document.getElementById( "resultField" ).value = result;
 }

 function addField()
 {
     id = "field" + idCounter++;

     label = document.createElement( "label" );
     label.htmlFor = id;
     label.appendChild( document.createTextNode( "Verdi:" ) );

     field = document.createElement( "input" );
     field.type = "text";
     field.id = id;
     field.onkeyup = sum;

     removeLink = document.createElement( "a" );
     removeLink.href = "javascript:removeField('" + id + "')";
     removeLink.appendChild( document.createTextNode( "Fjern felt" ) );

     listItem = document.createElement( "li" );
     listItem.appendChild( label );
     listItem.appendChild( document.createTextNode( " " ) );
     listItem.appendChild( field );
     listItem.appendChild( document.createTextNode( " " ) );
     listItem.appendChild( removeLink );

     fieldList = document.getElementById( "fieldList" );
     fieldList.appendChild( listItem );
 }

 function removeField( id )
 {
     field = document.getElementById( id );
     listItem = field.parentNode;
     fieldList = listItem.parentNode;

     fieldList.removeChild( listItem );
     sum();
 }

 window.onload = function()
 {
     addField();
     addField();
     addField();
     sum();
 };

 </script>
</head>
<body>

<h1>Sum</h1>

<p>
 <a href="javascript:addField()">Legg til felt</a>
</p>

<ul id="fieldList"></ul>

<p>
 <label for="result">Resultat:</label>
 <input type="text" id="resultField" readonly="readonly">
</p>

</body>
</html>

Endret 20. januar 2007 av balletryne

20. januar 2007

må prøve.. men før jeg prøver leser jeg kode. og. hva betyr denne linjen?

window.onload = function()

har jo en aning, men. jeg skjønner ikke helt

edit:

ellers var koden digg syntes jeg

har lært masse nytt av å lese den..

men spørsmålet over er enda uløst

Endret 20. januar 2007 av Slettet+142

Drømmemannen · 20. januar 2007

Den linjen betyr at window.onload-eventen skal trigge en funksjon som i dette tilfellet blir opprettet på stedet. window.onload-eventen blir fyrt av idét nettsiden er ferdig lastet.

20. januar 2007

ahh. nice

nå som jeg allerede har plaget deg med 2 spørsmål burde jeg ikke stille flere, men hva betyr denne linjen da?

result += new Number( fields[i].value );

Ståle · 20. januar 2007

Jeg antar det ligner på PHP syntaxen,

result = result + Number( fields.value );

i er da hvilket field det er.

Drømmemannen · 21. januar 2007

Stemmer. result-variabelen blir økt med verdien av felt 'i' i listen over felter, etter at verdien er blitt konvertert til et tall ved hjelp av Number-konstruktøren (new kan sløyfes). Skulle ikke konverteringen være vellykket blir resultatet Number.NaN (kan også skrives bare NaN og betyr naturligvis 'not a number').

mariyo: Hyggelig at du liker koden

21. januar 2007

okey.. aldri hørt om Number() i php. finner det heller ikke.

og number konverterer til tall. digg

kan si at jeg har lært masse javascript takket være balletryne (for det meste) :thumbup:

så takk for hjelp

Endret 21. januar 2007 av Slettet+142

Drømmemannen · 21. januar 2007

Bare hyggelig . I PHP ville man typisk brukt intval(), floatval() eller settype() for eksplisit konvertering. Number er JavaScript-spesifik.

Endret 21. januar 2007 av balletryne

21. januar 2007

...og da lærte jeg noe php idag også

thanks :thumbup:

Logg inn

Kalkulere verdier realtime

Anbefalte innlegg

Ståle

Videoannonse

Drømmemannen

Ståle

Gjest Slettet+142

Kagee

Gjest Slettet+142

Drømmemannen

Gjest Slettet+142

Drømmemannen

Gjest Slettet+142

Ståle

Drømmemannen

Gjest Slettet+142

Drømmemannen

Gjest Slettet+142

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer