连接两个不同的 select/option 标签以能够在 JavaScript 中计算

Question

我尝试在Js中做一些计算方法来计算square/rectangle的周长和面积。

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

我想在应用两个不同数字的输入字段后选择面积的平方或周长来计算时工作。

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

关于如何修复我的代码以使其正常工作，有什么有用的建议吗？

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

根据您的代码结构，您应该更改一些内容，例如您 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?

中相同的工作方式

连接两个不同的 select/option 标签以能够在 JavaScript 中计算

Concatenate two different select/option tag to able to calculate in JavaScript

javascript

html-select

concatenation

calculation