Изменить расчет на основе выбора значения раскрывающегося списка Javascript - PullRequest
Новая
       1

Изменить расчет на основе выбора значения раскрывающегося списка Javascript

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

Я пытаюсь создать приложение для расчета на основе значений выпадающего списка.Я хотел бы изменить используемое уравнение в зависимости от выбранного значения.Значение потребления работает при подаче, а выхлоп - нет.Значение впускного клапана рассчитывается по следующей формуле: 

const calcIn = ((t + 1.54) * (v - 0.13));

Впуск отображается нормально, но при переключении выпадающего меню на выпускное значение выходное значение не изменяется. 

function calculateInt() {
  const v = document.getElementById('v').value;
  const t = document.getElementById('t').value;
  const form = document.getElementById('valves');
  const calcIn = ((t + 1.54) * (v - 0.13));
  const ans1 = Math.floor(calcIn);
  const calcEx = ((t + 1.69) * (v - 0.22));
  const ans2 = Math.floor(calcEx);

  if (form.value || 'intake') {
    document.getElementById('result').value = ans1;
  } else if (form.value || 'exhaust') {
    document.getElementById('result').value = ans2;
  } else {
    return 'No Inputs';
  }

};
* {
  margin: 0;
}

h1,
h2,
a,
p {
  font-family: "Nunito", sans-serif;
}

#nav {
  width: 100%;
  height: 60px;
  background-color: #010658;
  position: fixed;
}

#nav ul {
  list-style: none;
  width: 100%;
  display: inline-flex;
  padding: 20px;
}

#nav li a {
  text-decoration: none;
  padding: 20px;
  font-size: 20px;
  color: #ffff;
}

#nav li a:hover {
  color: #9B9B9D;
}

main {
  text-align: center;
  height: 100%;
  width: 100%;
  padding-top: 100px;
}

#vehicle {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#vehicle {
  margin-bottom: 40px;
}

#vehicle select {
  padding: 6px;
  border-radius: 4px;
  box-shadow: none;
  border-color: #010658;
}

#vehicle button {
  width: 120px;
  height: 30px;
  background-color: #010658;
  border-color: #010658;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

#vehicle input {
  margin-top: 40px;
  padding: 6px;
  border-radius: 4px;
  box-shadow: none;
  border-color: #010658;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <title>Calculator</title>
</head>

<body>
  <header id="nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="calc.html">Calculator</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </header>
  <main>
    <div id="container">
      <form id="vehicle">
        <div>
          <select name="vehicles" onchange="">
            <option value="14-Forester">2014 Forester</option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
          </select>
          <select id="valves" name="valves">
            <option value="intake">Intake Valve</option>
            <option value="exhaust">Exhaust Valve</option>
          </select>
        </div>
        <input type="text" placeholder="Measured Clearance" id="v">
        <input type="text" placeholder="Current Shim" id="t">
        <button type="button" id="submit-btn" onclick="calculateInt();">Calculate</button>
        <input type="text" id="result">
      </form>
    </div>
  </main>

  <script type="text/javascript" src="scripts/jq.js"></script>
  <script type="text/javascript" src="scripts/js.js"></script>
</body>

</html>

Ответы [ 2 ]

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

Хорошо, так что ваши расчеты работают с первого раза.Теперь, когда вы на самом деле переключаете значение ввода, у вас нет кода для «прослушивания» этого.Все, что вам нужно сделать, это создать прослушиватель событий, который прослушивает изменение значения в вашем входе, затем снова вызвать функцию calcInt ().

, поэтому вам нужно создать переменную для элемента формы и затем добавитьпри изменении события в форму, которая запускает функцию calcInt при каждом изменении выбранных вами входных значений.

ex.form.addEventListener ('onChange', calculateInt);

И убедитесь, что вы проверили свои условия в своем операторе if.Вы хотите выполнить проверку на равенство вместо оператора OR, поэтому используйте оператор "==" или "===" (строгое равенство) вместо оператора "||" (OR).

code Конечнонет проблем.

Вне вашей функции calcInt вы можете поместить эти две строки

РЕДАКТИРОВАТЬ ПРИМЕР НИЖЕ

const form = document.getElementById('valves'); form.addEventListener('change',calculateInt);

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

Вам необходимо использовать ==, а не ||, в ваших if заявлениях: 

if (form.value == 'intake') {
    document.getElementById('result').value = ans1;
} else if (form.value == 'exhaust') {
    document.getElementById('result').value = ans2;
}

Кроме того, поскольку есть только два варианта, вам не нужно elseзаявление.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...