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>
 
<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>
<input type="number" id="IndPrisDiv" name="IndPrisDiv" dir="rtl" value="0" style="width:50px"/>
</div>
</div>
</body>
</Html>
