Avatar billede Emma Seniormester
21. december 2021 - 23:27 Der er 3 kommentarer og
1 løsning

Vis/skjul elementer

Jeg har lavet en formular med nogle input linjer jeg skal have nogle af dem lukket eller åbnet. Dette virker også. Mit problem er, at de skal være lukket når man kommer ind på siden. Jeg har forsøgt med display none men det kunne  ikke helt få til at virke. Jeg bliver glad vis der er en der kan hjælpe mig.
Koden her:
<!DOCTYPE html>
<Html>
<head>
<meta charset="utf-8">

<style type="text/css">
   
    #content{
        background:white;
        width:1000px;
        height:7000px;
        margin-left: auto;
        margin-right:auto;
        text-align: left;
        border: 5px groove;
    }
   
    #DelEt{
        left:300px;
        background:yellow;
        width:700px;
        height:60px;
        text-align: left;
    }
 
    #DelTo{
        left:300px;
        background:yellow;
        width:700px;
        height:60px;
        text-align: left;
        style="display:none"
    }
   
    #DelTre{
        left:300px;
        background:white;
        width:700px;
        height:60px;
        text-align: left;
    }
   
    #DelFire{
        left:300px;
        background:white;
        width:700px;
        height:60px;
        text-align: left;
    }
   
</style>

<Script>
function IndkøbprisDiv(){
            var Antal1 = document.getElementById("Antal1").value;
            var Antal1 = parseFloat(Antal1);
            var pris1 = document.getElementById("pris1").value;
            var pris1 = parseFloat(pris1);
            var PrisIalt1 = Antal1 * pris1;
            var Antal2 = document.getElementById("Antal2").value;
            var Antal2 = parseFloat(Antal2);
            var pris2 = document.getElementById("pris2").value;
            var pris2 = parseFloat(pris2);
            var PrisIalt2 = Antal2 * pris2;
            document.getElementById("PrisIalt1").value = Math.ceil(PrisIalt1);
            document.getElementById("PrisIalt2").value = Math.ceil(PrisIalt2);
           
            var Antal3 = document.getElementById("Antal3").value;
            var Antal3 = parseFloat(Antal3);
            var pris3 = document.getElementById("pris3").value;
            var pris3 = parseFloat(pris3);
            var PrisIalt3 = Antal3 * pris3;
            var Antal4 = document.getElementById("Antal4").value;
            var Antal4 = parseFloat(Antal4);
            var pris4 = document.getElementById("pris4").value;
            var pris4 = parseFloat(pris4);
            var PrisIalt4 = Antal4 * pris4;
       
            document.getElementById("PrisIalt3").value = Math.ceil(PrisIalt3);
            document.getElementById("PrisIalt4").value = Math.ceil(PrisIalt4);
        }
       

</Script> 

<script type="text/javascript">
    function showDiv() {
     
      document.getElementById('divId').style.display = "block";
    }

    function hideDiv() {
        document.getElementById('divId').style.display = "none";
    }

</script>

</head>
<body>

  <div id="content">
  <div id="Del1">
  <H2>Forsøg</H2>
  <label for="Antal1">Antal:</label>
  <input type="number" oninput="IndkøbprisDiv()" id="Antal1" name="Antal1" dir="rtl" value="" style="width:50px"/>
  <label for="Emne1">Benævnelse</label>
  <input type="text" id="Emne1" name="Emne1" value="" style="width:250px;max-width:400px"/>
  <label for="Pris1">Pris pr stk:</label>
  <input type="number" oninput="IndkøbprisDiv()" id="pris1" name="pris1" dir="rtl" value="" style="width:50px"/>
  <label for="PrisIalt1">Pris ialt:</label>
  <input type="number"  id="PrisIalt1" name="PrisIalt1" dir="rtl" value="0" style="width:50px"/>
  <br><Br>
  <label for="Antal2">Antal:</label>
  <input type="number" oninput="IndkøbprisDiv()" id="Antal2" name="Antal2" dir="rtl" value="" style="width:50px"/>
  <label for="Emne2">Benævnelse</label>
  <input type="text" id="Emne2" name="Emne2" value="" style="width:250px;max-width:400px"/>
  <label for="Pris2">Pris pr stk:</label>
  <input type="number" oninput="IndkøbprisDiv()" id="pris2" name="pris2" dir="rtl" value="" style="width:50px"/>
  <label for="PrisIalt2">Pris ialt:</label>
  <input type="number"  id="PrisIalt2" name="PrisIalt2" dir="rtl" value="0" style="width:50px"/>
  <br><Br>
  </div>
  <div id="Del2">
  <div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div id="divId" class="border">
<label for="Antal3">Antal:</label>
  <input type="number" oninput="IndkøbprisDiv()" id="Antal3" name="Antal3" dir="rtl" value="" style="width:50px"/>
  <label for="Emne3">Benævnelse</label>
  <input type="text" id="Emne3" name="Emne3" value="" style="width:250px;max-width:400px"/>
  <label for="Pris3">Pris pr stk:</label>
  <input type="number" oninput="IndkøbprisDiv()" id="pris3" name="pris3" dir="rtl" value="" style="width:50px"/>
  <label for="PrisIalt3">Pris ialt:</label>
  <input type="number"  id="PrisIalt3" name="PrisIalt3" dir="rtl" value="0" style="width:50px"/>
  <br><Br>
  <label for="Antal4">Antal:</label>
  <input type="number" oninput="IndkøbprisDiv()" id="Antal4" name="Antal4" dir="rtl" value="" style="width:50px"/>
  <label for="Emne4">Benævnelse</label>
  <input type="text" id="Emne4" name="Emne4" value="" style="width:250px;max-width:400px"/>
  <label for="Pris4">Pris pr stk:</label>
  <input type="number" oninput="IndkøbprisDiv()" id="pris4" name="pris4" dir="rtl" value="" style="width:50px"/>
  <label for="PrisIalt4">Pris ialt:</label>
  <input type="number"  id="PrisIalt4" name="PrisIalt4" dir="rtl" value="0" style="width:50px"/>
  </div>

        <br>
        <a href="java script:;" onclick="showDiv()">Flere Emner</a>
           
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp
       
        <a href="java script:;" onclick="hideDiv()">Færre Emner</a>

        </div>
    </div>
 
  </div>
  <br>
  <div id="DelTre"= display>
  <label for="IndPrisDiv">Samlet pris for Diverse emner:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="number"  id="IndPrisDiv" name="IndPrisDiv" dir="rtl" value="0" style="width:50px"/>
</div>
</div>

</body>
</Html>
Avatar billede ejvindh Ekspert
22. december 2021 - 11:16 #1
Der er mange småfejl i den kode, men lige i forhold til det, du nævner, så skal du jo lægge din display:none ud for den div, som du vil have gjort usynlig. Så altså noget i stil med:

    #divId{
        display:none;
    }
Avatar billede Emma Seniormester
22. december 2021 - 19:05 #2
Tak for dit svar, du fik sat mig på sporet. Jeg havde imellem tiden lavet en anden løsning. Jeg skulle bruge løsningen
<div id="DelTo" style="display:none">
Nu fandt jeg så en løsning på det.
Avatar billede ejvindh Ekspert
22. december 2021 - 20:00 #3
Også en mulighed. Men så skal du nok ændre din JavaScript, for at kunne vise/skjulte felterne efter indlæsning.
Avatar billede Emma Seniormester
26. december 2021 - 15:28 #4
Undskyld jeg først svarer nu, alt virker som det skal. jeg kan tænde og slukke for de ekstra linjer med en knap. Den starter op uden de ekstra linjer. Så alt fungerer tilfredsstillende. Men tak for din hjælp. Uden din hjælp i første omgang havde jeg nok ikke fundet løsningen.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester