Søg
Avatar billede Hans1 Praktikant
29. juli 2011 - 17:17 Der er 24 kommentarer og
1 løsning

Variabel i javascripts

Hej

Forsøger mig lidt med javascripts.
Da jeg skal have flere elementer end "Fornavn" tænkte jeg på om jeg i stedet for at lave en funktion til hver "ret knap" kunne bruge variabeler:

fx edit(fornavn) // Ved fornavn
edit(efternavn) // ved efternavn

så der kun er en funktion og den ikke bliver så lang.


<style type="text/css">
.hide {
display: none;
}
</style>

<script type="text/javascript">
function edit() {
document.getElementById("updateDiv").className = "hide";
document.getElementById("updateDiv2").className = "show";
}
</script>


<table>
<tr>
<td width="100px">
<div id="updateDiv" class="show">Fornavn</div>
<div id="updateDiv2" class="hide"><input type="text" name="firstname" value="Fornavn" style="width:90px" /></div>
</td>
<td><input type="submit" onclick="edit()" value="Ret"></td>
</tr>
</table>

Avatar billede olebole Juniormester
29. juli 2011 - 17:31 #1
<ole>

Det kan du godt, men uden at se din HTML kode er det svært at vide, hvordan

/mvh
</bole>
Avatar billede Hans1 Praktikant
29. juli 2011 - 17:39 #2
Okay.

Lad os så sige at jeg har tre felter: Fornavn, Efternavn og e-mail. Hvordan ville funktionen så se ud.

<table>
<tr>
<td width="100px">
<div id="updateDiv" class="show">Fornavn</div>
<div id="updateDiv2" class="hide"><input type="text" name="firstname" value="Fornavn" style="width:90px" /></div>
</td>
<td><input type="submit" onclick="edit()" value="Ret"></td>
</tr>

<tr>
<td width="100px">
<div id="updateDiv" class="show">Efternavn</div>
<div id="updateDiv2" class="hide"><input type="text" name="lastname" value="Efternavn" style="width:90px" /></div>
</td>
<td><input type="submit" onclick="edit()" value="Ret"></td>
</tr>

<tr>
<td width="100px">
<div id="updateDiv" class="show">E-mail</div>
<div id="updateDiv2" class="hide"><input type="text" name="email" value="E-mail" style="width:90px" /></div>
</td>
<td><input type="submit" onclick="edit()" value="Ret"></td>
</tr>


</table>
Avatar billede kjeldsted Novice
29. juli 2011 - 18:02 #3
Du kan vel bare skrive onclick="edit('fornavn')" osv.
Avatar billede Hans1 Praktikant
29. juli 2011 - 18:08 #4
Jo men det jo ikke kun det. er det?

Hver input skal vel også have sit eget unikke id så man ikke åbner andre felter end det felts ret knap som man har trykket på.
Avatar billede kjeldsted Novice
29. juli 2011 - 18:12 #5
Hvis du kan forklare lidt mere om hvad funktionen skal gøre og hvordan og hvorledes vil det nok blive lidt lettere.
Avatar billede olsensweb.dk Ekspert
29. juli 2011 - 18:30 #6
du må ikke bruge sammen id flerer steder på siden
id="updateDiv"
id="updateDiv2"

er også i tvivl om hvordan du vil have det til at virke, men her er noget at starte op på

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
    .hide {
        display: none;
    }
    </style>
    <script type="text/javascript">
    function edit(elm){
        switch(elm){
            case "Fornavn":
                    document.getElementById("updateDiv1").className = "hide";
                    document.getElementById("updateDiv2").className = "show";                    
            break;
            
            case "Efternavn":
                    document.getElementById("updateDiv3").className = "hide";
                    document.getElementById("updateDiv4").className = "show";                
            break;
            
            case "email":
                    document.getElementById("updateDiv5").className = "hide";
                    document.getElementById("updateDiv6").className = "show";                
            break;
        }        
    }
    </script>
</head>
<body>
<table>
<tr>
<td width="100px">
<div id="updateDiv1" class="show">Fornavn</div>
<div id="updateDiv2" class="hide"><input type="text" name="firstname" value="Fornavn" style="width:90px" /></div>
</td>
<td><input type="submit" onclick="edit('Fornavn')" value="Ret"></td>
</tr>
<tr>
<td width="100px">
<div id="updateDiv3" class="show">Efternavn</div>
<div id="updateDiv4" class="hide"><input type="text" name="lastname" value="Efternavn" style="width:90px" /></div>
</td>
<td><input type="submit" onclick="edit('Efternavn')" value="Ret"></td>
</tr>
<tr>
<td width="100px">
<div id="updateDiv5" class="show">E-mail</div>
<div id="updateDiv6" class="hide"><input type="text" name="email" value="E-mail" style="width:90px" /></div>
</td>
<td><input type="submit" onclick="edit('email')" value="Ret"></td>
</tr>
</table> 
</body>
</html>
Avatar billede kjeldsted Novice
29. juli 2011 - 18:40 #7
Og så kunne man jo hjælpe sig selv ved at bruge ID'er som fornavnTitle og fornavnContent eller noget i den dur i stedet for updateDiv2.
Avatar billede Hans1 Praktikant
29. juli 2011 - 18:41 #8
kjeldsted> Mit spørgsmål er om man behøver at skrive de samme linjer til hver id. Eller om man kunne lave det så smart at det kun var følgende to linjer:


document.getElementById("updateDiv3").className = "hide";                   
document.getElementById("updateDiv4").className = "show";   


Som jeg kun skrev en gang. Og man så via edit(email) fx kunne se at det var ret-knappen ved e-mail som skulle ændres til et input felt.

Altså behøver man at skrive alt det som ronols har skrevet ved hvert input? kan man ikke lave en general regel?
Avatar billede Hans1 Praktikant
29. juli 2011 - 18:43 #9
OBS:

document.getElementById("//Finder id'et ud fra edit(email \\)").className = "hide";                   
document.getElementById("("//Finder id'et ud fra edit(email \\)").className = "show";
Avatar billede kjeldsted Novice
29. juli 2011 - 18:45 #10
Så det skal jo være noget i stil med:

function edit(element1,element2)
{
    docuemnt.getElementById(element).className = "hide";
    document.getElementById(element).className = "show";
}


Og så
<input type="submit" onclick="edit('updateDiv3','updateDiv4')" value="Ret">
Avatar billede Hans1 Praktikant
29. juli 2011 - 18:52 #11
Lige præcis.

Tænkte på om man i funktionen skriver alle elementer som edit() godtager.

fx


function edit(fornavn,efternavn,email) {

// Lad os sige at vi omdøber updateDiv1 til fornavn
  hvis fornavn så bliver kaldt fra ret knappen så gør den dette.

docuemnt.getElementById(fornavn).className = "hide";

// Ved nr 2 skriver den så det samme men tilføjer et 2 tal efter.

document.getElementById(firstname2).className = "show";



// SÅ hvis jeg nu kalder den med efternavn så skriver den bare efternavn i den første og efternavn2 i den næste.

}

<input type="submit" onclick="edit('fornavn')" value="Ret">

Avatar billede kjeldsted Novice
29. juli 2011 - 19:01 #12
Det kan du godt. Så skal det så bare være getElementById(fornavn + '2').
Avatar billede Hans1 Praktikant
29. juli 2011 - 19:09 #13
Okay. Men så mangler jeg stadig hvad jeg skal tilføje ved denne linje:


docuemnt.getElementById(Her skal der stå fornavn, efter eller email alt efter hvilken ret knap der er trykket på).className = "hide";
Avatar billede kjeldsted Novice
29. juli 2011 - 19:15 #14
function edit(element)
{
    docuemnt.getElementById(element).className = "hide";
    document.getElementById(element + '2').className = "show";
}


Så skal du bare skrive <input type="submit" onclick="edit('fornavn')" value="Ret"> Så vil den rette "fornavn" og "fornavn2".
Avatar billede Hans1 Praktikant
29. juli 2011 - 19:39 #15
hmm jeg får fejl udført.

bruger denne:


<style type="text/css">
.hide {
display: none;
}
</style>

<script type="text/javascript">
function edit(element)
{
    docuemnt.getElementById(element).className = "hide";
    document.getElementById(element + '2').className = "show";
}


</script>


<table>
<tr>
<td width="100px">
<div id="fornavn" class="show">Fornavn</div>
<div id="fornavn2" class="hide"><input type="text" name="firstname" value="Fornavn" style="width:90px" /></div>
</td>
<td><input type="submit" onclick="edit(fornavn)" value="Ret"></td>
</tr>
</table>


Avatar billede kjeldsted Novice
29. juli 2011 - 19:48 #16
Hvilken fejl får du?
Avatar billede Hans1 Praktikant
29. juli 2011 - 19:49 #17
Kan ikke se hvad fejlen er i IE
Avatar billede kjeldsted Novice
29. juli 2011 - 19:50 #18
Men er det fordi der ikke sker noget eller hvad?
Avatar billede Hans1 Praktikant
29. juli 2011 - 19:52 #19
Ja. Jeg skulle nok ha skrevet at der ikke sker noget.
Avatar billede kjeldsted Novice
29. juli 2011 - 19:54 #20
Det skal være edit('fornavn')
Avatar billede Hans1 Praktikant
29. juli 2011 - 19:59 #21
Doooh! Nu virker det perfekt.
Tusinde tak for hjælpen Jens.

Lad mig kaste point din vej :)
Avatar billede kjeldsted Novice
29. juli 2011 - 19:59 #22
Hehe.
En typisk der er lidt for let at lave :)
Og det var så lidt.
Avatar billede Hans1 Praktikant
29. juli 2011 - 20:01 #23
Ja heh.
Avatar billede kjeldsted Novice
29. juli 2011 - 20:03 #24
Og tak for points
Avatar billede Hans1 Praktikant
29. juli 2011 - 20:12 #25
Selv tak.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 1 03/02/202614:19 03/02/202618:42
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
28/0311:18 DENVER DVB-tMPEG-4 HD TUNER Af ole falsted i Fjernsyn & projektorer
White papers
Flere white papers »