Question

我尝试在Js中建立一些计算方法来计算正方形/矩形的周长和面积。

当我选择其他方法时，我在选项中的某个地方失败了。

应用两个不同数字的输入字段后，我想选择面积或周长的平方进行计算。

当我只选择正方形选项，但我做不到时，我也尝试隐藏第二个输入字段。

那么关于如何修复我的代码以使其正常工作的任何有益建议？

function calc() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var typ = document.getElementById("type").value;

  var squarePerimeter = num1 * num1;
  document.getElementById("perimeter").value = squarePerimeter;
  var squareArea = num1 * 4;
  document.getElementById("area").value = squareArea;

  var rectanglePerimeter = num1 * num2;
  document.getElementById("perimeter").value = rectanglePerimeter;
  var rectangleArea = 2 * num1 + num2;
  document.getElementById("area").value = rectangleArea;



  if (typ === "sqr") {
    document.getElementById("result").value = squarePerimeter;
  } else if (typ === "rect") {
    document.getElementById("result").value = rectanglePerimeter;
  } else if (typ === "sqr") {
    document.getElementById("result").value = squareArea;
  } else if (typ === "rect") {
    document.getElementById("result").value = rectangleArea;
  }

};

<select name="" id="type">
  <option id="square" value="sqr">square</option>
  <option id="rectamgle" value="rect">rectangle</option>
</select>
<select name="" id="calculating">
  <option id="perimeter" value="perimeter">Perimeter</option>
  <option id="area" value="area">Area</option>
</select>
<br>
<input type="number" id="num1">
<input type="number" id="num2">
<br>
<button type="button" onclick="calc()">Calculate</button>
<input type="number" id="result">

Answer 1

按照代码结构，您应该更改一些内容，例如yoiur elseif，您将设置与以前的ifs相同的条件，但它们永远不会成立。

function calc() {
    var num1 = parseInt(document.getElementById("num1").value);
    var num2 = parseInt(document.getElementById("num2").value);
    var typ = document.getElementById("type").value;
    var obj = document.getElementById("calculating").value;

    if (typ === "sqr" && obj === "area") {
        document.getElementById("result").value = num1 * num1;
    } else if (typ === "rect" && obj === "area") {
        document.getElementById("result").value = num1 * num2;
    } else if (typ === "sqr") {
        document.getElementById("result").value = num1 * 4;
    } else if (typ === "rect") {
        document.getElementById("result").value = 2 * (num1 + num2);
    }
};

function toggleNum2() {
    var typ = document.getElementById("type").value;
    var num2 = document.getElementById("num2");
    if (typ === "sqr") {
        num2.style.display = "none";
    } else {
        num2.style.display = "inline-block";
    }
};

<body onload="toggleNum2()">
    <select name="" id="type" onchange="toggleNum2()">
      <option id="square" value="sqr">square</option>
      <option id="rectamgle" value="rect">rectangle</option>
    </select>
    <select name="" id="calculating">
      <option id="perimeter" value="perimeter">Perimeter</option>
      <option id="area" value="area">Area</option>
    </select>
    <br>
    <input type="number" id="num1">
    <input type="number" id="num2">
    <br>
    <button type="button" onclick="calc()">Calculate</button>
    <input type="number" id="result">
</body>

Answer 2

其他问题！如何像在jQuery中一样轻松地实现此代码？

连接两个不同的选择/选项标签，以便能够在JavaScript中进行计算

2 个答案: