TutorialMeta
Ad

Concatenate Two Different Select/option Tag To Able To Calculate In JavaScript

- 1 answer

I try to make some calculating method in Js for calculate the perimeter and the area of the square/rectangle.

I failed somewhere in the options when I pick the different methods.

I want to work when I choose square of the area or perimeter to calculate after I apply the input fields with two different number.

I also try to hide the second input field when I only choose the square option, but I could not do it.

So any helpful suggestion to how to fix my code to work properly?

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

Ad

Answer

Following your code structure you should change some things, like yoiur elseif, your are setting the same conditions as previous ifs, they will never be true.

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>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad