建议

Question

我试图弄清楚如何重新使用计算不同数字的平方（通过不同的文本字段输入）的函数，并将它们显示在不同的文本字段中。这是我当前的HTML页面：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <script language="javascript">
    function square(a) {
      a = a * a;
      document.f.T2.value = a;
    }
  </script>
  <form name="f">
    <table>
      <tr>
        <td>a</td>
        <td><input type="text" name="T1" onkeyup="square(document.f.T1.value)"></td>
        <td>Square</td>
        <td><input type="text" name="T2"></td>
      </tr>
      <tr>
        <td>b</td>
        <td><input type="text" name="T3" onkeyup="square(document.f.T3.value)"></td>
        <td>Square</td>
        <td><input type="text" name="T4"></td>
      </tr>
    </table>
  </form>
</body>

</html>

＆＃13;

这适用于第一个整数a。无法确定如何使其适用于b。

如果我在函数中添加这行代码，它也适用于第一个值。

document.f.T4.value=a;

Answer 1

你走了：

function square(value, target) {    
    target.value= value * value
}

并使用它：

<td>
   <input type="text" name="T1" onkeyup="square(this.value, document.f.T2)">
</td>
<td>Square</td>
<td>
   <input type="text" name="T2">
</td>

这是一个有效的例子：

https://jsfiddle.net/jo960acq/

Answer 2

您需要将当前的input元素和target传递给您的函数square。

建议

分担责任。： - ）

以下代码段包含square calculation的函数，另一个代码片段可以从input elements获取值并调用函数square。

这样您就可以重复使用代码！

function square(a) {
  return a * a;
}

function squareFromElement(_this, target) {
  var a = square(_this.value);  
  document.getElementsByName(target)[0].value = a;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <form name="f">
    <table>
      <tr>
        <td>a</td>
        <td><input type="text" name="T1" onkeyup="squareFromElement(this, 'T2')"></td>
        <td>Square</td>
        <td><input type="text" name="T2"></td>
      </tr>
      <tr>
        <td>b</td>
        <td><input type="text" name="T3" onkeyup="squareFromElement(this, 'T4')" )></td>
        <td>Square</td>
        <td><input type="text" name="T4"></td>
      </tr>
    </table>
  </form>

</body>

</html>

请参阅？现在正在将结果设置为正确的输入。

Answer 3

您需要在另一个参数中传递您想要显示结果的文本框中的函数。此外，您可以使用this来引用当前文本框，而不是完全限定它。试试这个：

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <script language="javascript">
    function square(a, result) {
      a = a * a;
      result.value = a;
    }
  </script>
  <form name="f">
    <table>
      <tr>
        <td>a</td>
        <td><input type="text" name="T1" onkeyup="square(this.value, document.f.T2)"></td>
        <td>Square</td>
        <td><input type="text" name="T2"></td>
      </tr>
      <tr>
        <td>b</td>
        <td><input type="text" name="T3" onkeyup="square(this.value, document.f.T4)"></td>
        <td>Square</td>
        <td><input type="text" name="T4"></td>
      </tr>
    </table>
  </form>
</body>

</html>

如何重用函数在多个文本字段中输出返回值？

3 个答案:

建议