我的计算结果出现在不同的页面上

Question

我需要创建代码，当在两个不同的框中输入长度和宽度时自动计算周长。

我设法做到了，但我希望答案显示在“计算”按钮下方，但答案会使按钮和框消失。有人可以告诉我需要更改什么吗？

这是我的代码：

<!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>

Answer 1

不要使用document.write功能。 write() 方法主要用于测试：如果在 HTML 文档完全加载后使用，它将删除所有现有的 HTML。创建一个段落标签并提供一个 id 并将您的结果放在该段落中。

 <!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>

Answer 2

尝试向 html 添加一个黑色段落，然后使用 document.getElementById("").innerHTML 更改其中的文本。

我的计算结果出现在不同的页面上

My results of calculation appear on a different page

html

javascript

calculation