几个功能

J. *_*Foe 2 html javascript

我试图在这里做两个函数,一个是我使用加法,另一个是我使用乘法.如果我输入5和6,则计算按钮将生成11和30.我应该将乘法函数放在这个中,还是单独的?如果是这样,我如何将它连接到那个按钮?

function calculate() {
  tal1 = document.getElementById("tal1").value;
  tal2 = document.getElementById("tal2").value;
  var answer;
  answer = tal1 * 1 + tal2 * 1;
  document.getElementById("answer").value = answer;
}
Run Code Online (Sandbox Code Playgroud)
<form id="f1" name="f1">
  <input id="tal1" type="text"><br><br>
  <input id="tal2" type="text"><br><br>
  <input onclick="calculate()" type="button" value="Calculate!"><br><br>
  <input id="answer" type="text"><br><br>
  <input id="answer" type="text">
</form>
Run Code Online (Sandbox Code Playgroud)

Nin*_*olz 6

您可以使用单个函数来计算这两个值.

  • 在顶部使用声明的变量,
  • 采用一元加+号将字符串转换为数字
  • 对于转换为零值的字符串使用逻辑OR||NaN,同时查看truthyfalsy值,
  • 采取独特id的解决方案,
  • 将计算分配给结果元素,
  • 将带有事件的<button>元素用于计算type="button",否则按钮将作为提交.

function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a + b;
}

function calculate() {
    var tal1 = +document.getElementById("tal1").value || 0,
        tal2 = +document.getElementById("tal2").value || 0;
        //     ^ unary plus, get a number
        //                                            ^^^^ check for truthyness, take
        //                                                 zero if the first operand
        //                                                 is falsy, like NaN

    document.getElementById("sum").value = add(tal1, tal2);
    document.getElementById("product").value = multiply(tal1, tal2);
}
Run Code Online (Sandbox Code Playgroud)
<form id="f1" name="f1">
    <input id="tal1" type="text"><br><br>
    <input id="tal2" type="text"><br><br>
    <button onclick="calculate();" type="button">Calculate!</button><br><br>
    <input id="sum" type="text"><br><br>
    <input id="product" type="text">
</form>
Run Code Online (Sandbox Code Playgroud)