I have a javascript aquarium volume calculator located here http://utahfishkeepers.us/page/volumecalculator. Here is the code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://www.fishlore.com/scripts/js/share.js"></script> <script type="text/javascript"> var result = 0; var roundLength = 2; function computeGallons() { result = Math.round((document.frmMain.TankLength.value * document.frmMain.TankWidth.value * document.frmMain.TankHeight.value / 231)*100)/100; document.frmMain.USGallons.value = Math.round(result*100)/100; } </script> <form name="frmMain"><span class="b">Aquarium Calculator: Calculate Rectangle Fish Tank Volume in Gallons Based on Tank Size</span><p> Fish Tank Length in Inches:<br /> <input type="text" name="TankLength" onkeyup="computeGallons()"><br /> <br /> Fish Tank Width in Inches:<br /> <input type="text" name="TankWidth" onkeyup="computeGallons()"><br /> <br /> Fish Tank Height in Inches:<br /> <input type="text" name="TankHeight" onkeyup="computeGallons()"><br /> <br /> Aquarium Size is<br /> <input type="text" name="USGallons"> US Gallons<br /> <br /> </form> Code (JavaScript): The volume after the data is entered is in a box as if you were to enter it. Could someone help me? I am not very good with javascript. I would ideally like to have a button that people click to calculate the volume and then the volume will not come out in an input box.
If you don't like people to input anything into the output volume box, just add "readonly" attribute to it?
<input type="text" name="USGallons" readonly="readonly"/> HTML: But perhaps this might look better with code below (using span element instead of input): <!-- form.frmMain --> <form name="frmMain" onsubmit="return computeGallons();"> <span>Aquarium Calculator: Calculate Rectangle Fish Tank Volume in Gallons Based on Tank Size</span> <p> <label>Fish Tank Length in Inches:<br/> <input type="text" name="TankLength"/> </label><br/> <label>Fish Tank Width in Inches:<br/> <input type="text" name="TankWidth"/> </label><br/> <label>Fish Tank Height in Inches:<br/> <input type="text" name="TankHeight"/> </label><br/> <input type="submit" value="Calculate"/><br/> <label>Aquarium Size is:</label><br/> <span id="USGallons">US Gallons</span> </p> </form> <!-- script for the form.frmMain --> <script type="text/javascript"> function computeGallons(){ document.getElementById('USGallons').childNodes[0].nodeValue = ( document.frmMain.TankLength.value * document.frmMain.TankWidth.value * document.frmMain.TankHeight.value / 231 ).toFixed(2) + ' US Gallons'; return false; } </script> HTML:
As it's been suggested, make it readonly and add whatever style you want to it: https://jsfiddle.net/jos0ytpy/