Gå til innhold

Kalkulere verdier realtime

Ståle

Av Ståle
i Programmering og webutvikling

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)

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 av balletryne
Lenke til kommentar
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet

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 :(

Lenke til kommentar
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)

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 av balletryne
Lenke til kommentar
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet (endret)

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 :p

 

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 av Slettet+142
Lenke til kommentar
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet

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? :p

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

Lenke til kommentar
Drømmemannen

Drømmemannen

Skrevet
Skrevet

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

Lenke til kommentar
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet (endret)

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 av Slettet+142
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...