How can I add a function so the user can input "p" or "a" to get the perimeter o-CodePudding

Here is my original code where everything works, but I need to add a third function where the user inputs either "a" or "p" into the first input ("apBox"). Then it finds either the perimeter or area of the rectangle instead of doing both:

Where am I going wrong with this?

I feel like it should be structured like this, but I am unsure what would you guys do? It works, but not the way I need it to work where the user can input the area or perimeter, then enter the length/width and get individual answers.

    If () {
}
    else if () {
}
    else () {
}
    document.getElementById("message").innerHTML=(output);

function controller() {
  var type = document.getElementById("apBox").value;
  var length = document.getElementById("lengthBox").value;
  var width = document.getElementById("widthBox").value;
  var mainSolution = document.getElementById("message");
  var answer = length * width;
  var answer2 =  length    width    length    width;
  // this is where I am getting stuck, it should be an if statement, right? 
  if (type == "a") {

  }
  if (length.length > 0 && width.length > 0) {
    if (isNaN(answer) === false && isNaN(answer2) === false) {
      mainSolution.innerHTML = "Area =&nbsp"   answer   "<br>Perimeter =&nbsp"   answer2;
    } else {
      mainSolution.innerHTML = "Must Enter A Number";
    }
  } else {
    mainSolution.innerHTML = "";
  }
}

function clearText() {
  document.getElementById("message").innerHTML = ("<br>");
  document.getElementById("apBox").value = "";
  document.getElementById("lengthBox").value = "";
  document.getElementById("widthBox").value = "";
}

#main {
  background-color: #455A6F;
  border-radius: 3px;
  padding: 10px;
}

#header {
  background-color: #292A2B;
  border-radius: 3px;
  padding: 10px;
}

body {
  text-align: center;
  font-family: Montserrat;
  color: #fff;
}

a {
  color: rgb(27, 157, 218);
}

.btn1,
.btn2 {
  background-color: rgba(52, 139, 221, 0.699);
  border: #303436;
  font-family: Montserrat;
  font-size: 12px;
  color: #fff;
  letter-spacing: 2px;
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  line-height: 3;
  text-decoration: none;
  box-shadow: 0 0 4px black;
  text-shadow: 0 1px 0 black;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-shadow: 1px;
  text-transform: capitalize;
  text-align: center;
}


/* This is a custom snippet I made so the footer always stays at the bottom of the page */

footer {
  position: absolute;
  right: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2em;
  background-color: darkslategray;
  text-align: center;
  border-color: #fff;
  border-radius: 18px;
  padding: 12px;
}

.description {
  font-style: italic;
}

form {
  border-radius: 25px;
  padding: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <meta name="description" content="Area of a Rectangle">
  <title>Area And Perimeter Of A Rectangle</title>
</head>

<body>
  <div id="main">
    <div id="header">
      <h1>Program 6</h1>
      <h5>Area or Perimeter</h5>
      <h6>of a Rectangle</h6>
    </div>

    <form id="myForm">
      <form id="myForm">
        <label for="apBox1">Enter A for Area or P for Perimeter:</label><br><br>
        <input type="text" id="apBox">
        <br><br>
        <label for="userInput2">Length:</label><br><br>
        <input type="text" id="lengthBox"><br><br>
        <label for="userInput3">Width:</label><br><br>
        <input type="text" id="widthBox">
      </form>

      <p id="demo">Output: </p>
      <p id="message"> <br> </p>

      <button class="btn1" type="button" onClick="controller()">Submit</button>
      <button class="btn2" type="button" onClick="clearText()">Clear</button>
  </div>
</body>

</html>

CodePudding user response：

Move the calculations into the appropriate if branch.

You can add another variable for the label to be shown in the result field, since you're no longer calculating both answer and answer2.

if (type == "a") {
    answer = length * width;
    label = 'Area';
} else if (type == "p") {
    answer = 2 * length   2 * width;
    label = 'Perimiter';
} else {
    mainSolution.innerText = "Enter either a or p";
    return;
}

Full code:

Show code snippet

function controller() {
  var type = document.getElementById("apBox").value;
  var length = document.getElementById("lengthBox").value;
  var width = document.getElementById("widthBox").value;
  var mainSolution = document.getElementById("message");
  var answer;
  var label;
  if (type == "a") {
    answer = length * width;
    label = 'Area';
  } else if (type == "p") {
    answer = 2 * length   2 * width;
    label = 'Perimiter';
  } else {
    mainSolution.innerText = "Enter either a or p";
    return;
  }
  if (length.length > 0 && width.length > 0) {
    if (!isNaN(answer)) {
      mainSolution.innerHTML = `${label} =&nbsp ${answer}`;
    } else {
      mainSolution.innerHTML = "Must Enter A Number";
    }
  } else {
    mainSolution.innerHTML = "";
  }
}

function clearText() {
  document.getElementById("message").innerHTML = ("<br>");
  document.getElementById("apBox").value = "";
  document.getElementById("lengthBox").value = "";
  document.getElementById("widthBox").value = "";
}

#main {
  background-color: #455A6F;
  border-radius: 3px;
  padding: 10px;
}

#header {
  background-color: #292A2B;
  border-radius: 3px;
  padding: 10px;
}

body {
  text-align: center;
  font-family: Montserrat;
  color: #fff;
}

a {
  color: rgb(27, 157, 218);
}

.btn1,
.btn2 {
  background-color: rgba(52, 139, 221, 0.699);
  border: #303436;
  font-family: Montserrat;
  font-size: 12px;
  color: #fff;
  letter-spacing: 2px;
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  line-height: 3;
  text-decoration: none;
  box-shadow: 0 0 4px black;
  text-shadow: 0 1px 0 black;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-shadow: 1px;
  text-transform: capitalize;
  text-align: center;
}


/* This is a custom snippet I made so the footer always stays at the bottom of the page */

footer {
  position: absolute;
  right: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2em;
  background-color: darkslategray;
  text-align: center;
  border-color: #fff;
  border-radius: 18px;
  padding: 12px;
}

.description {
  font-style: italic;
}

form {
  border-radius: 25px;
  padding: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <meta name="description" content="Area of a Rectangle">
  <title>Area And Perimeter Of A Rectangle</title>
</head>

<body>
  <div id="main">
    <div id="header">
      <h1>Program 6</h1>
      <h5>Area or Perimeter</h5>
      <h6>of a Rectangle</h6>
    </div>

    <form id="myForm">
      <form id="myForm">
        <label for="apBox1">Enter A for Area or P for Perimeter:</label><br><br>
        <input type="text" id="apBox">
        <br><br>
        <label for="userInput2">Length:</label><br><br>
        <input type="text" id="lengthBox"><br><br>
        <label for="userInput3">Width:</label><br><br>
        <input type="text" id="widthBox">
      </form>

      <p id="demo">Output: </p>
      <p id="message"> <br> </p>

      <button class="btn1" type="button" onClick="controller()">Submit</button>
      <button class="btn2" type="button" onClick="clearText()">Clear</button>
  </div>
</body>

</html>