My results of calculation appear on a different page

Question

I need to create code which automatticaly calculates the circumference when the length and width are entered in two different boxes.

I managed to do so, but I want the answer to appear underneath the "calculate" button, but the answer will make the button and boxes disappear. Could someone tell me what I need to change?

Here is my code:

<!DOCTYPE html>
  <html>
    <body>
      <form>
         Width:<br>
           <input id="Width" type="text" name="Width">
         <br>Length<br>
           <input id="Length" type="text" name="Length">
         <br><br>
           <input type="button" value="Calculate circumference" onclick="doMath()">
     </form>

     <script>
       function doMath() {
          var Width1 = document.getElementById('Width').value;
          var Length1 = document.getElementById('Length').value;
          var Circ = parseInt(Width1) + parseInt(Width1) + parseInt(Length1) + parseInt(Length1);
          document.write(Circ);
       }
     </script>
   </body>
</html>

https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — epascarello, Oct 21 '20 at 17:02

mr hr · Accepted Answer · 2020-10-21T12:55:13.060

Do not use document.write function. The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML. Create a paragraph tag and give an id and place your result in that paragraph.

 <!DOCTYPE html>
    <html>

    <body>
      <form>
         Width:<br>
           <input id="Width" type="text" name="Width">
         <br>Length<br>
           <input id="Length" type="text" name="Length">
         <br><br>
           <input type="button" value="Calculate circumference" onclick="doMath()">
           <p id="result">
           
           </p>
     </form>

     <script>
       function doMath() {
        var Width1 = document.getElementById('Width').value;
        var Length1 = document.getElementById('Length').value;
        var Circ = parseInt(Width1) + parseInt(Width1) + parseInt(Length1) + parseInt(Length1);
        //document.write(Circ);
        document.getElementById("result").textContent = Circ;
     }
     </script>

     </body>

     </html>

score 0 · Answer 2 · answered Oct 21 '20 at 12:45

0

Try adding a black paragraph to the html and then use document.getElementById("").innerHTML to change the text inside of it.

answered Oct 21 '20 at 12:45

hacker19374

21
9

My results of calculation appear on a different page

2 Answers2