I'm attempting to apply inline CSS to a JS calculation (e.g. 3*2*1) in order to make it appear red. I have experimented with using a span tag, but it only displays the calculation and not the result. I also tried utilizing an internal style sheet. How can I achieve this? Here is the JS fiddle link for reference:http://jsfiddle.net/ytWea/
<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
document.getElementById("idOutputVolume").innerHTML=sVolume;
}
</script>
</head>
<body onload="volumeFields()">
Insert the length of your object:<input type="text" size="20" id="idLengthVolume" /> <br/>
Insert the width of your object:<input type="text" size="20" id="idWidthVolume" /><br/>
Insert the height of your object:<input type="text" size="20" id="idHeightVolume" />
<input type="button" style="display:block" onclick="computeVolume()" value="Calculate" id="calcVolume"/>
<div id='idOutputVolume'></div>
</body>
</html>