Объединить два разных тега select / option для возможности расчета в JavaScript - PullRequest
Новая
       37

Объединить два разных тега select / option для возможности расчета в JavaScript

0 голосов
/ 20 ноября 2018

Я пытаюсь сделать какой-нибудь метод вычисления в 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">

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Другой вопрос!Как я могу легко реализовать этот код так же, как и в jQuery?

0 голосов
/ 20 ноября 2018

Следуя структуре вашего кода, вы должны изменить некоторые вещи, например, 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...