Søg
Avatar billede gulvflaesk Nybegynder
02. januar 2012 - 01:23 Der er 10 kommentarer og
1 løsning

Få knap til at forsvinde ved klik

Hej Eksperter,

Jeg roder med at en <div> skal vise sig når man klikker på en knap. Men når man klikker på knappen bliver den til en lille prik og knappens class bliver stadig udført, hvilket får layoutet til at være lidt af en øjebæ.

Her er JavaScriptet:

<script language="javascript">
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "";
      }
    else {
        ele.style.display = "block";
        text.innerHTML = "";
    }
}
</script>

Her er knappen:

<a href="java script:toggle();" id="displayText" class="button large red fancybox" style="javatext-decoration: none; margin-right: 30px;"><span>FORMULAR</span></a>


Kan det lade sig gøre at fjerne knappen helt efter at man har klikket på den? Jeg har prøvet at Googlé det, men uden held...

Godt nytår til alle :-)
Avatar billede DeeDawg Nybegynder
02. januar 2012 - 07:06 #1
Dit spørgsmål giver lidt sig selv, da du allerede selv har svaret.

text.style.display = "none";

Jeg ville nok ændre lidt på min funktion, da den er lidt rodet.

function toggle(){
    var ele = document.getElementById("toggleText").style;
    var text = document.getElementById("displayText").style;
    
    text.display = "none";
    ele.display = (ele.display == "block" ? "none" : "block");
}
Avatar billede olebole Juniormester
02. januar 2012 - 16:04 #2
<ole>

Hvis du vil være sikker på, at browseren afvikler som forventet, skal du nok bruge et validt script-tag:

<script type="taxt/javascript">

- og så er spørgsmålet, om din knap overhovedet er et block-level element(?) Derfor kan det meget vel være, du bør skrive:


function toggle(){
    var ele = document.getElementById("toggleText").style;
    var text = document.getElementById("displayText").style;
   
    text.display = "none";
    ele.display = (ele.display == "inline" ? "none" : "inline");
}


/mvh
</bole>
Avatar billede olebole Juniormester
02. januar 2012 - 16:05 #3
- men hvad med displayText? Skal det også vises igen ved andet tryk på knappen?
Avatar billede DeeDawg Nybegynder
02. januar 2012 - 19:09 #4
Tænkte også lidt på det samme, men han viser os jo ikke opsætningen for hans div, så det kan være han har en anden knap derinde. I dunno.

Btw -

<script type="text/javascript">

:)
Avatar billede olebole Juniormester
02. januar 2012 - 20:03 #5
Jamen, det er da helt korrekt! JavaScript tagget er noget af det sidste i DK, der ikke er lagt en eller anden form for takst på - og lad det endelig forblive sådan.

Schhhhh ... tal sagte og skriv med småt, så de ikke opdager noget inde i Flæsketinget. Vi skulle helst undgå at sætte unødig gang i deres svært betændte afgiftskirtler  *o)
Avatar billede gulvflaesk Nybegynder
02. januar 2012 - 21:35 #6
Tusinde tak for hjælpen!

Når jeg indsætter både olebole's og DeeDawg's koder, så sker der ingenting når jeg klikker på knappen?

Hvad gør jeg mon forkert?
Avatar billede DeeDawg Nybegynder
02. januar 2012 - 22:44 #7
Hvis du nu viste os din side, som den ser ud nu, ville det gøre det lidt lettere for os at hjælpe dig. ;)
Avatar billede gulvflaesk Nybegynder
03. januar 2012 - 00:04 #8
Hej DeeDawg,

Hele sitet ligger desværre lokalt. Øv.

Men smider lige denne del op...

http://pineapple.dk/test/

Når man trykker på knappen så forsvinder den, men der er stadig en lille mørkegrå prik.
Avatar billede DeeDawg Nybegynder
03. januar 2012 - 00:55 #9
Okay, først og fremmest, så skal dit script ligge i <head> og ikke i <body>.

Derudover, har du jo ikke indsat noget af vores kode overhovedet?
Nu har du hele siden her, så der ikke er misforståelser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>###</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="###" />
        <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
        <link rel="shortcut icon" type="image/png" href="###" />
        <script type="text/javascript">
            function toggle(){
                var ele = document.getElementById("toggleText").style;
                var text = document.getElementById("displayText").style;
                
                text.display = "none";
                ele.display = (ele.display == "block" ? "none" : "block");
            }
        </script>
    </head>
    <body>
        <div id="details_column_right">
            <div id="toggleText" style="display: none">
                <h2>Bookingforespørgsel</h2>
                <p>Jeg er en div som kommer frem ved klik på knappen...</p>
            </div>
            <p align="right">
                <a href="java script:toggle();" id="displayText" class="button large red fancybox" style="text-decoration: none; margin-right: 30px;"><span>VIS DIV</span></a>
            </p>
            <br /><br />
        </div>
    </body>
</html>

Vær dog opmærksom på at java script:toggle() skal være i et ord. Det er Eksperten.dk, som deler det op.

Jeg vil også lige minde dig om at javatext-decoration: none; ikke er en eksisterende CSS-property. ;)
Avatar billede gulvflaesk Nybegynder
03. januar 2012 - 01:04 #10
Tusinde tak, det var virkelig sødt af dig!

Jo, havde i øvrigt indsat Jeres kode, men da den ikke virkede så kommenterede jeg den ud, og glemte lige at få den over på "test"-siden...

Tak for hjælpen atter en gang, smid et svar for point :-)
Avatar billede DeeDawg Nybegynder
03. januar 2012 - 01:24 #11
Så lidt. ;)
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 »