0

我正在做一些可以计算输入值的体积和面积的东西。我遇到的问题是我不希望它们同时显示。它将首先显示体积功能，然后每当单击对象的计算面积按钮时，它应该显示面积查找器，但它们都同时显示。如何让它们分别出现？这是 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>
4

1 回答 1

1

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

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

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

您可以逐个元素地制作此元素，也可以将所有元素组放在一个 div 中，并在 div 中使用此属性。

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

我也认为你应该使用 jQuery 来处理这类事情，它让它更容易更重要，你不必担心（太多）交叉浏览不兼容。

于 2013-06-30T02:15:22.617 回答