Question

这应该是一个非常简单的，但我似乎无法明确找到解决方案。我正在寻找一个javascript计算（从表格中的一堆输入），我得到两个数字。然后，这些数字将更新同一表单中两个html输出元素的值。这是我正在尝试做的一个最小的工作示例（如果有更好的方法，我会全力以赴）：

<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN">
<html>
<head>
<script>
function somecalc() {
    var a = parseFloat(document.forms["form1"]["id1"].value);
    var b = parseFloat(document.forms["form1"]["id2"].value);
    var c = parseFloat(document.forms["form1"]["id3"].value);
    var d = parseFloat(document.forms["form1"]["id4"].value);
    var out1 = a-b-c-d;
    var out2 = a+b+c+d;
    var outarr = [];
    outarr.push(out1);
    outarr.push(out2);
    return outarr;
}
</script>
</head>

<body>

  <form name="form1">
    <table>
      <tr>
        <td>
          Head1
        </td>
        <td>
          Head2
        </td>
        <td>
          Head3
        </td>
        <td>
          Head4
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/>
        </td>
      </tr>
    </table>
    <p><input type="submit" value="Run" onclick="somecalc();"></p>
    <table border="1">
      <tr>
        <td>
          Out1 = <output name="out1" for=""></output>
        </td>
      </tr>
      <tr>
        <td>
          Out2 =<output name="out2" for=""></output>
        </td>
      </tr>
    </table>
  </form>

</body>
</html>

我怎样才能获得outarr的第一个元素来填充out1，同样，outarr的第二个元素在按下Run按钮时更新out2？

Answer 1

您只需通过value属性设置out1和out2的值。

＆＃13;

function somecalc() {
    var a = parseFloat(document.forms["form1"]["id1"].value);
    var b = parseFloat(document.forms["form1"]["id2"].value);
    var c = parseFloat(document.forms["form1"]["id3"].value);
    var d = parseFloat(document.forms["form1"]["id4"].value);
    var out1 = a-b-c-d;
    var out2 = a+b+c+d;
    document.forms["form1"]["out1"].value = out1;
    document.forms["form1"]["out2"].value = out2;
    return [out1, out2];
}

＆＃13;

<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN">
<html>
<body>
  <form name="form1">
    <table>
      <tr>
        <td>Head1</td><td>Head2</td><td>Head3</td><td>Head4</td>
      </tr>
      <tr>
        <td>
          <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/>
        </td>
      </tr>
    </table>
    <p><input type="submit" value="Run" onclick="somecalc();"></p>
    <table border="1">
      <tr>
        <td>
          Out1 = <output name="out1" for=""></output>
        </td>
      </tr>
      <tr>
        <td>
          Out2 =<output name="out2" for=""></output>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

＆＃13;

Answer 2

function somecalc() {
    var a, b, c, d, out1, out2;
    a= parseFloat(document.forms["form1"]["id1"].value);
    b = parseFloat(document.forms["form1"]["id2"].value);
    c = parseFloat(document.forms["form1"]["id3"].value);
    d = parseFloat(document.forms["form1"]["id4"].value);
    out1 = a-b-c-d;
    out2 = a+b+c+d;
    document.querySelector("output[name=out1]").innerHTML = out1
    document.querySelector("output[name=out2]").innerHTML = out2
}

试试这个，或者你可以在你的html中识别

<output id="out1" .. > 和document.getElementById("out1").innerHTML = out1

Answer 3

你也可以这样做。您可以使用document.querySelector或您使用的方法而不是document.getElementById我只是为了简单起见而尝试使用您的代码。

一般来说，javascript文件链接到外部文件而不是在脚本标记中声明，但我想你可能会为家庭作业做这件事，或者把它全部放在HTML中使它变得更简单一些。如果您确实将其分开，则必须在我的代码中创建一个单击处理程序，即btnRun.addEventListener('click', runClick); e.preventDefault()也阻止提交按钮的默认操作，该按钮通过任何操作提交表单陈述（GET，POST等）

如果你不了解它，Mozilla Developer Network还有很好的javascript语法和示例资源https://developer.mozilla.org/en-US/docs/Web/JavaScript

var btnRun = document.getElementById('run');

var out2 = document.getElementById('out2');
var out1 = document.getElementById('out1');

function runClick(e){
  e.preventDefault();   

  var output1, output2;
  var a = parseFloat(document.getElementById('id1').value);
  var b = parseFloat(document.getElementById('id2').value);
  var c = parseFloat(document.getElementById('id3').value);
  var d = parseFloat(document.getElementById('id4').value);


  output1 = a + b + c + d;
  output2= a - b - c - d;
  out1.innerText= output1;
  out2.innerHTML = output2;
}

btnRun.addEventListener('click',  runClick);

表单提交时的html输出更新

3 个答案: