Question

我有这个代码用于根据文本字段中的用户输入计算方程式公式为：（（a * b）+（b * c））/（a + b）

我想知道是否有另一种方法可以做同样的事情，更简单，更短，更好等等

HTML

<div id="calculusB">
    <p style="font-size: 25px; color: #d81cbc;">Please calculate:</p>
    <img src="formula.jpg" style="margin-left: 94px"> <br>
    Enter "a" here: <input style="margin-top: 50px;" type="text" id="a" placeholder="a" name="a" onkeypress="return onlyNumbers(event)"><br>
    Enter "b" here: <input style="margin-top: 5px;" type="text" id="b" placeholder="b" name="b" onkeypress="return onlyNumbers(event)"><br>
    Enter "c" here: <input style="margin-top: 5px;" type="text" id="c" placeholder="c" name="c" onkeypress="return onlyNumbers(event)"><br>
    <input style="margin-top: 5px; margin-left: 140px" type="button" value="Calculate" name="calculate" onclick="return calculate();">
</div>

的Javascript

function calculate() {
  var valA = document.getElementById("a").value;
  var actualA = parseInt(valA);
  var valB = document.getElementById("b").value;
  var actualB = parseInt(valB);
  var valC = document.getElementById("c").value;
  var actualC = parseInt(valC);
  var par1 = actualA * actualB;
  var par2 = actualB * actualC;
  var denominator = actualA + actualB;
  var numerator = par1 + par2;
  var result =  numerator / denominator;
  alert(result);
}

Answer 1

jQuery使DOM查询更简单。对于任何Web开发来说，这几乎是必须的。

要导入，请在HTML文件的<script>标记的开头添加此行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

然后你可以写你的Javascript文件：

function calculate() {
  var a = parseInt($("#a").val());
  var b = parseInt($("#b").val());
  var c = parseInt($("#c").val());
  var result = ((a * b) + (b * c)) / (a + b);
  alert(result);
}

Answer 2

这是非常好的，只是一些提示：

使用<input type="number" />来避免parseInt()

您可以简化您的功能

function calculate() {
  var actualA = document.getElementById("a").value;
  var actualB = document.getElementById("b").value;
  var actualC = document.getElementById("c").value;
  var result =  ((actualA * actualB) + (actualB * actualC)) /(actualA + actualB);
  alert(result);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

<div id="calculusB">
  <p style="font-size: 25px; color: #d81cbc;">Please calculate:</p>
  <img src="formula.jpg" style="margin-left: 94px"> <br>
  Enter "a" here: <input style="margin-top: 50px;" type="number" id="a" placeholder="a" name="a"><br>
  Enter "b" here: <input style="margin-top: 5px;" type="number" id="b" placeholder="b" name="b"><br>
  Enter "c" here: <input style="margin-top: 5px;" type="number" id="c" placeholder="c" name="c"><br>
  <input style="margin-top: 5px; margin-left: 140px" type="button" value="Calculate" name="calculate" onclick="return calculate();">
</div>

Answer 3

这是我的解决方案，我发现它更容易阅读我所做的是将输入类型更改为数字，以便我们可以避免测试值是否为数字

function calculate() {
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  var c = document.getElementById("c").value;
  var result = ((a * b)+(b * c)) / (a + b);
  alert(result);
}

<div id="calculusB">
  <p style="font-size: 25px; color: #d81cbc;">Please calculate:</p>
  Enter "a" here: <input style="margin-top: 50px;" type="number" id="a" placeholder="a" name="a" /></br> Enter "b" here: <input style="margin-top: 5px;" type="number" id="b" placeholder="b" name="b" /></br>
  Enter "c" here: <input style="margin-top: 5px;" type="number" id="c" placeholder="c" name="c" /></br>
  <input style="margin-top: 5px; margin-left: 140px" type="button" value="Calculate" name="calculate" onclick="calculate();" />
</div>

Answer 4

您可以使用type设置为number来简化HTML，这意味着您不必依赖单独的函数来验证输入。您可以使用按钮将计算提交给函数。

<div id="calculusB">
  <p class="label">Please calculate:</p>
  <input type="number" placeholder="a"><br>
  <input type="number" placeholder="b"><br>
  <input type="number" placeholder="c"><br>
  <button>Calculate</button>
</div>

请注意，所有内联JS也已从HTML中删除。那是因为你可以使用JS来获取元素，在按钮的情况下，添加一个事件监听器。

const inputs = document.querySelectorAll('input');
const button = document.querySelector('button');
button.addEventListener('click', calculate, false);

最后，您的代码可以通过一些ES6风格进行简化：

function calculate() {

  // Take the input elements, `map` over them and return
  // the parsed value, and deconstruct them into the a, b, and c variables
  const [a, b, c] = [...inputs].map(input => Number(input.value));

  // Simply reconstruct the formula using the variables
  const out = ((a * b) + (b * c)) / (a + b);
  console.log(out);
}

这是工作演示：

const inputs = document.querySelectorAll('input');
const button = document.querySelector('button');
button.addEventListener('click', calculate, false);

function calculate() {
  const [a, b, c] = [...inputs].map(input => Number(input.value));
  const out = ((a * b) + (b * c)) / (a + b);
  console.log(out);
}

.label {
  font-size: 25px;
  color: #d81cbc;
}

input[type="number"] {
  margin-top: 5px;
}

button {
  margin-top: 5px;
}

<div id="calculusB">
  <p class="label">Please calculate:</p>
  <input type="number" placeholder="a"><br>
  <input type="number" placeholder="b"><br>
  <input type="number" placeholder="c"><br>
  <button>Calculate</button>
</div>

写这个函数calculate（）`的更好方法

4 个答案: