Javascript 如何使窗体隐藏_Javascript_Html_Css

Javascript 如何使窗体隐藏

javascript html css

Javascript 如何使窗体隐藏,javascript,html,css,Javascript,Html,Css,我正在做一些可以计算输入值的体积和面积的东西。我遇到的问题是，我不希望它们同时显示。它将首先显示音量功能，然后每当单击对象的“计算面积”按钮时，它将显示“面积查找器”，但两者同时显示。如何使它们单独显示？这是小提琴函数volumeFields（）{ document.getElementById（“idLengthVolume”）； document.getElementById（“idWidthVolume”）；文档.getElementById（“idHeightVolume”）；

我正在做一些可以计算输入值的体积和面积的东西。我遇到的问题是，我不希望它们同时显示。它将首先显示音量功能，然后每当单击对象的“计算面积”按钮时，它将显示“面积查找器”，但两者同时显示。如何使它们单独显示？这是小提琴


函数volumeFields（）{
document.getElementById（“idLengthVolume”）；
document.getElementById（“idWidthVolume”）；
文档.getElementById（“idHeightVolume”）；
document.getElementById（“calcVolume”）；
}
函数computeVolume（）{
var x=document.getElementById（“idLengthVolume”）.value；
var y=document.getElementById（“idWidthVolume”）.value；
var z=document.getElementById（“idHeightVolume”）.value；
var sVolume=“对象的体积为”+x*y*z+“立方”+volumeUnits.value；
document.getElementById（“idOutputVolume”）.innerHTML=sVolume；
document.getElementById（“idVolumeReCompute”）；
document.getElementById（“IDARecompute”）；
}
函数区域字段（）{
文件.getElementById（“idLengthrea”）；
document.getElementById（“idWidthArea”）；
文件.getElementById（“calcArea”）；
}
函数computeArea（）{
var x=document.getElementById（“idLengthrea”）.value；
var y=document.getElementById（“idWidthArea”）.value；
var sArea=“对象的面积为“+x*y+”平方“+areaUnits.value；
document.getElementById（“idOutputArea”）.innerHTML=sVolume；
document.getElementById（“IDarearcompute”）；
getElementById（“idVolumeCompute”）；
}
插入对象的长度：
厘米
在里面
英尺
惯性矩


插入对象的宽度：
厘米
在里面
英尺
惯性矩


插入对象的高度：
厘米
在里面
英尺
惯性矩
再做一次计算
计算物体的面积
插入对象的长度：
厘米
在里面
英尺
惯性矩


插入对象的宽度：
厘米
在里面
英尺
惯性矩
再做一次计算
计算物体的体积

您可以通过两种方式隐藏东西（可能还有很多其他方式，但让我们关注两种方式）：

1.-css属性可见性：您可以使用：style=“visibility:hidden”和元素“消失”（但仍在使用空格，因此可能会看到一个“空”空格）（要使元素可见，请使用visibility:visible）

2.-css属性显示：您可以使用：display:none：元素也会消失，但不会使用任何空间（为了使其可见，将其更改为其他类型的显示，例如：display:block）

可以逐个元素创建此元素，也可以将所有元素组放在一个div中，然后在div中使用此属性

要动态更改css属性，请选中此链接

我还认为您应该使用jQuery来处理这类事情，它使它变得更简单、更重要，您不必担心（太多）交叉浏览的不兼容性。

但是我如何使它在点击按钮时发生？要使它在点击jQuery中的按钮时发生：

$（'#按钮id'）。点击（函数（）{$（'.class of the thing your want hide'）.hide（）}）

请注意，您可以使用任何您特别想要的选择器；我只是使用class和id两种方式来选择内容，以便于说明。

   <html>
    <head>
     <script>
      function volumeFields(){

     document.getElementById("idLengthVolume");
     document.getElementById("idWidthVolume");
    document.getElementById("idHeightVolume");   
    document.getElementById("calcVolume");
}

 function computeVolume(){
    var x=document.getElementById("idLengthVolume").value;
    var y=document.getElementById("idWidthVolume").value;
    var z=document.getElementById("idHeightVolume").value;
    var sVolume="The volume of your object is " + x * y * z +" cubic " + volumeUnits.value;
    document.getElementById("idOutputVolume").innerHTML=sVolume;   
    document.getElementById("idVolumeReCompute");
    document.getElementById("idAreaCompute");
}
function areaFields(){

    document.getElementById("idLengthArea");
    document.getElementById("idWidthArea");
    document.getElementById("calcArea");
}
 function computeArea(){
    var x=document.getElementById("idLengthArea").value;
    var y=document.getElementById("idWidthArea").value;
    var sArea="The area of your object is " + x * y +" square " + areaUnits.value; 
    document.getElementById("idOutputArea").innerHTML=sVolume;
    document.getElementById("idAreaRecompute");
    document.getElementById("idVolumeCompute");
}

 </script>
    </head>
    <body onload="volumeFields()">
       <form action="units">
   Insert the length of your object:<input type="text" size="20" id="idLengthVolume" />
        <select name="" id="volumeUnits">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select><br/>
    Insert the width of your object:<input type="text" size="20" id="idWidthVolume" />
        <select name="">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select><br/>
    Insert the height of your object:<input type="text" size="20" id="idHeightVolume" />
        <select name="">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select>
    </form>
<input type="button" style="display:block" onclick="computeVolume()" value="Calculate"     id="calcVolume"/>
      <div id='idOutputVolume'></div>
    <button type="button" style="display:block;" onclick="volumeFields()"   id="idVolumeReCompute">Do another calculation</button>
    <button type="button" style="display:block;" onclick="areaFields()" id="idAreaCompute">calculate the area of an object</button>
    <form action="units">
       Insert the length of your object:<input type="text" size="20" id="idLengthArea" />
        <select name="" id="areaUnits">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select><br/>
    Insert the width of your object:<input type="text" size="20" id="idWidthArea" />
        <select name="">
            <option value="centimeters">cm</option>
            <option value="inches">in</option>
            <option value="feet" selected>ft</option>
            <option value="miles">mi</option>
        </select>
        <input type="button" style="display:block" onclick="computeArea()" value="Calculate" id="calcArea"/>
    </form>  
    <div id='idOutputArea'></div>
    <button type="button" style="display:block;" onclick="areaFields()" id="idAreaRecompute">Do another calculation</button>
    <button type="button" style="display:block;" onclick="volumeFields()" id="idVolumeCompute">calculate the volume of an object</button>
    </body>
    </html>