Question

我正在制作可以计算输入值的音量和面积的东西。我遇到的问题是我不希望它们同时显示。它将首先显示音量功能，然后每当单击对象按钮的计算区域时，它应显示区域查找器，但它们都同时显示。如何让它们单独出现？继承人JS小提琴; http://jsfiddle.net/xVSfF/

   <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>

Answer 1

你可以用两种方式隐藏东西（可能还有很多其他东西，但让我们把焦点放在两个方面）：

1.-css属性可见性：您可以使用：style =＆＃34; visibility：hidden＆＃34;元素＆＃34;消失＆＃34; （但仍然使用空格，因此可能会看到＆＃34;空＆＃34;空格）（使元素可见使用可见性：可见）

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

您可以按元素创建此元素，或者将所有元素组放在div中，并在div中使用此属性。

要动态更改css属性，请检查此链接.. http://www.w3schools.com/js/js_htmldom_css.asp

我还认为你应该使用jQuery来做这类事情，它会让它变得更简单，更重要，你不必担心（太多）交叉浏览不兼容。

如何使表单隐藏

1 个答案: