Javascript for-løkke

prosjeik · 9. november 2013

Jeg en kode som viser 9 nummererte knapper. Under hver av dem skal jeg ha en funksjon som oppdaterer en variabel med 1 hver gang jeg klikker på den. Det er det jeg har prøvd med for-løkka, men for-løkka kjører ut alle tall til 400 som jeg har satt som begrensning.

Når jeg klikker på knapp 1 skal variabelen i få verdien 1, så skal knappene vises igjen.

Trykker jeg igjen skal variabelen få verdien 2 og jeg kommer automatisk tilbake til knapperaden igjen.

Til høyre for knapperaden tenkte jeg å vise verdiene til variablene. Dvs at grensesnittet mitt skal se ut som på vedlagt .gif-fil.

Kan noen hjelpe meg?

<!DOCTYPE html>
<html>
<head>
<script>
function kunnskap1()
{

for (var i = 1; i <= 400; i++) {
document.writeln(i);
}

document.writeln("hei");

}

function kunnskap2()
{

document.writeln("hei2");

}

function kunnskap3()
{

document.writeln("hei3");

}

function kunnskap4()
{

document.writeln("hei4");

}

function kunnskap5()
{

document.writeln("hei5");

}

function kunnskap6()
{

document.writeln("hei6");

}

function kunnskap7()
{

document.writeln("hei7");

}

function kunnskap8()
{

document.writeln("hei8");

}

function kunnskap9()
{

document.writeln("hei9");

}

</script>
</head>

<body>

<button onclick="kunnskap1()">1</button>
<button onclick="kunnskap2()">2</button>
<button onclick="kunnskap3()">3</button>
<button onclick="kunnskap4()">4</button>
<button onclick="kunnskap5()">5</button>
<button onclick="kunnskap6()">6</button>
<button onclick="kunnskap7()">7</button>
<button onclick="kunnskap8()">8</button>
<button onclick="kunnskap9()">9</button>

</body>
</html>

Emancipate · 9. november 2013

document.writeln() virker nok ikke akkurat som du tror. Den er kun egnet å bruke før dokumentet er ferdig innlastet første gang. Her viser jeg hvordan du kan endre innholdet i et element:

<!DOCTYPE html>
 <html>
 <head>
 <script>
 
 function kunnskap1()
 {
    rutediven = document.getElementById("rute1");
    rutediven.innerHTML = 1;
 }


 </script>
 </head>

 <body>

 <button onclick="kunnskap1()">1</button>

<div id="rute1" style="background: red; color: white">rute1</div>

 </body>
 </html>

prosjeik · 9. november 2013

Takk for svar - det ser bra ut, nå er utfordringen for meg å finne ut hvordan jeg kan oppdatere verdien når jeg trykker flere ganger på knappen. Første trykk=1, andre trykk=2 osv...

Emancipate · 10. november 2013

<!DOCTYPE html>

 <html>

 <head>

 <script>


 var rute1tall = 1;


 function kunnskap1()

 {

    var rutediven = document.getElementById("rute1");

    rutediven.innerHTML = rute1tall;

    rute1tall += 1;

 }




 </script>

 </head>


 <body>


 <button onclick="kunnskap1()">1</button>


<div id="rute1" style="background: red; color: white">rute1</div>


 </body>

 </html>

Kanskje den enkleste måten er å bruke en global variabel. Det er ikke alltid den beste måten, men det fungerer bra i dette enkle eksempelet. Endret 10. november 2013 av Tåkelur

Logg inn

Javascript for-løkke

Anbefalte innlegg

prosjeik

Lenke til kommentar

Videoannonse

Emancipate

Lenke til kommentar

prosjeik

Lenke til kommentar

Emancipate

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer