Question

在学习Java编程之后，我是Javascript的新手，所以我尝试在HTML页面中用Javascript定义一个简单的对象，但代码不会告诉我计算结果（IE不是diplaying）区域，周长或哪个矩形更大）。似乎没有语法错误。

<!DOCTYPE html>

  <script language ="JavaScript">

          Rectangle = function(b,h) {

                     this.base = parseInt(b);
                     this.height = parseInt(h);

                     this.area = b*h;
                     this.perimeter = (b+h)*2;
                     this.diagonal = sqrt(b*b+h*h);

                     }

            </script>

    </head>

    <body>

          <h3>Rectangles!</h3>
          <b>First rectangle</b><br><br>
          Base: <input type = "number" id = "base1" value = "0">
          Height: <input type = "number" id = "height1" value = "0">
          <br><br>
          <b>Second rectangle</b><br><br>
          Base: <input type = "number" id = "base2" value = "0">
          Altezza: <input type = "number" id = "height2" value = "0">

          <br><br><br>
          <b>Data about first rectangle:</b><br><br>
          <t>Perimeter is <div id = "p1"> </div>
          <t>Area is <div id = "a1"> </div>
          <t>Diagonal is <div id = "d1"> </div>
          <br><br>
          <b>Data about second rectangle:</b><br><br>
          <t>Perimeter is <div id = "p2"> </div>
          <t>Area is <div id = "a2"> </div>
          <t>Diagonal is <div id = "d2"> </div>
          <br><br>
          <div id = "compare"> </div>

          <script language = "JavaScript">
                  A = new Rectangle(document.getElementById("base1").value,document.geteElementById("altezza1"));
                  B = new Rectangle(document.getElementById("base2").value,document.geteElementById("altezza2"));
                  document.getElementById("p1").innerHTML = A.perimeter;
                  document.getElementById("a1").innerHTML = A.area;
                  document.getElementById("d1").innerHTML = A.diagonal;
                  document.getElementById("p2").innerHTML = B.perimeter;
                  document.getElementById("a2").innerHTML = B.area;
                  document.getElementById("d2").innerHTML = B.diagonal;
                  if A.area > B.area document.getElementById("compare").innerHTML = "First rectangle is bigger";
                  if A.area < B.area document.getElementById("compare").innerHTML = "Second rectangle is bigger";
                  else               document.getElementById("compare").innerHTML = "Rectangles are equal";
                  </script>

         </body>

 </html>

Answer 1

首先改变

this.diagonal = sqrt(b*b+h*h);

到

this.diagonal = Math.sqrt(b*b+h*h);

其次

geteElementById

到（太多“e”）

getElementById

如果错了。而不是

if A.area > B.area document.getElementById("compare").innerHTML = "First rectangle is bigger";
                  if A.area < B.area document.getElementById("compare").innerHTML = "Second rectangle is bigger";
                  else               document.getElementById("compare").innerHTML = "Rectangles are equal";

写这样的东西

document.getElementById("compare").innerHTML = (A.area > B.area) ? "First rectangle is bigger" : ((A.area < B.area) ? "Second rectangle is bigger" : "Rectangles are equal")

此外 - 即使在填写字段之前，您也只执行一个脚本。在点击/提交/值更改时执行此操作。

正如上面提到的那样 - 使用浏览器调试工具。这些工具中的“控制台”选项卡会告诉您需要了解的有关错误的所有信息。

Answer 2

您的代码中存在许多拼写错误和错误的语法，请尝试以下操作：

function Rectangle(b,h) {

                     this.base = parseInt(b);
                     this.height = parseInt(h);

                     this.area = b*h;
                     this.perimeter = (b+h)*2;
                     this.diagonal = Math.sqrt(b*b+h*h);
console.log(this.perimeter);
                     }

          console.log(document.getElementById("base1").value);

 var A = new Rectangle(document.getElementById("base1").value,document.getElementById("height1").value);
 var B = new Rectangle(document.getElementById("base2").value,document.getElementById("height2").value);            document.getElementById("p1").innerHTML = A.perimeter;
        document.getElementById("a1").innerHTML = A.area;
                  document.getElementById("d1").innerHTML = A.diagonal;
                  document.getElementById("p2").innerHTML = B.perimeter;
                  document.getElementById("a2").innerHTML = B.area;
                  document.getElementById("d2").innerHTML = B.diagonal;           
 if (A.area > B.area) document.getElementById("compare").innerHTML = "First rectangle is bigger";
 if (A.area < B.area) document.getElementById("compare").innerHTML = "Second rectangle is bigger";
  else               document.getElementById("compare").innerHTML = "Rectangles are equal";

Javascript对象不显示文本

2 个答案: