Question

我正在尝试基于下拉表单值创建一个计算应用程序。我想根据选择的值来更改所使用的方程式。进气值适用于提交，但排气无效。进气门值基于以下公式计算：

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>

Answer 1

您需要在==语句中使用||，而不是if：

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

此外，由于只有两个选项，因此不需要else语句。

Answer 2

好的，这样您的计算就可以顺利进行了。现在，当您实际切换输入的值时，就没有代码“监听”该代码了。您需要做的就是创建一个事件侦听器，该侦听器侦听输入中值的变化，然后再次调用calculateInt（）函数。

因此，您必须为表单元素创建一个var，然后在每次选择输入值更改时将on change事件添加到运行calculateInt函数的表单中。

例如form.addEventListener（'onChange'，calculateInt）;

并确保您在if语句中检查条件。您要运行相等性检查而不是OR语句，因此请使用“ ==”或“ ===”（严格相等性）而不是“ ||”（OR）语句。

;; Don't show exception info to end users! Instead log it. (define (error-responder url exn) (log-error "Exception responding to ~v:\n~a" (url->string url) (exn->string exn)) (response/full 500 #"Oops" (current-seconds) #f '() '())) 没问题。

在calculateInt函数之外，您可以放置这两行

下面的编辑示例

code

根据选择值下拉列表Javascript进行更改计算

2 个答案: