Как я могу добавить функцию, чтобы пользователь мог ввести "p" или "a", чтобы получить периметр или площадь прямоугольника?

ProgramBox

Как я могу добавить функцию, чтобы пользователь мог ввести «p» или «a», чтобы получить периметр или площадь прямоугольника?

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#javascript #html #math

Вопрос:

Вот мой исходный код, в котором все работает, но мне нужно добавить третью функцию, в которой пользователь вводит «a» или «p» в первый ввод («apBox»). Затем он находит либо периметр, либо площадь прямоугольника вместо того, чтобы делать и то, и другое:

Что я делаю не так с этим?

Я чувствую, что это должно быть структурировано так, но я не уверен, что бы вы, ребята, сделали? Это работает, но не так, как мне нужно, чтобы это работало, когда пользователь может ввести площадь или периметр, затем ввести длину/ширину и получить индивидуальные ответы.

     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 amp;amp; width.length > 0) {
    if (isNaN(answer) === false amp;amp; isNaN(answer2) === false) {
      mainSolution.innerHTML = "Area =amp;nbsp"   answer   "<br>Perimeter =amp;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>

Ответ №1:

Переместите вычисления в соответствующую if ветвь.

Вы можете добавить другую переменную для метки, которая будет отображаться в поле результата, так как вы больше не вычисляете оба answer и 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;
}

Полный код:

 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 amp;amp; width.length > 0) {
    if (!isNaN(answer)) {
      mainSolution.innerHTML = `${label} =amp;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>

1. Я попробовал это, но если вы запустите его в фрагменте кода, например, в codepen, как здесь, он не сработает: codepen.io/agtshadow/pen/0764f3ef05cfddc5f100fcff8e3010f4 Я ценю помощь и благословляю Бога, просто пытаюсь понять, чего мне здесь не хватает, так как это кажется правильным.

2. В кодовом поле отсутствует та часть controller() , которая отображается answer .

3. Эта часть не отличается от кода, который вы опубликовали выше. Я только что показал, что вы должны поместить в if раздел, чтобы рассчитать ответ.

4. Спасибо, бармар, вы ответили на мой вопрос. Ты был прав. Я был так занят переделыванием кода, что удалил некоторые важные вещи, которые нужно было сохранить, теперь он работает так, как задумывалось, и я знал, что так и должно быть! Я просто не успевал, так что большое вам спасибо: codepen.io/agtshadow/pen/0764f3ef05cfddc5f100fcff8e3010f4 .

Метки: Как я могу добавить функцию, чтобы получить периметр или площадь прямоугольника?, чтобы пользователь мог ввести «p» или «a»

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

как решить неперехваченную ошибку ссылки: функция не определена

Как делегировать два фактора для облачного каталога OneLogin?

Упорядочение по нескольким столбцам в Prisma