入力値の体積と面積を計算できるものを作っています。私が抱えている問題は、両方を同時に表示したくないということです。最初にボリューム関数が表示され、オブジェクトの面積計算ボタンがクリックされるたびに、エリア ファインダーが表示されますが、両方が同時に表示されます。それらを個別に表示するにはどうすればよいですか? 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>