Question

我有以下代码，应该通过HREF点击来收集值每次单击一个数字时，都要将其附加到文本字段“number”的内容中。当我点击提交时，它会进入一个评估“数字”内容的新页面。当我单击预览并且“数字”按预期填充但它在我的浏览器中不起作用时，它似乎在我的编辑器（HTML-Kit）中正常工作。文本字段保持为空。这里似乎有什么问题？

<FORM ACTION="showcontent.htm" METHOD="post">
<input type="text" name="number" value="">
<TABLE BORDER="1">
    <TR>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '1';">1</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '2';">2</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '3';">3</A></TD>
    <TR>
    <TR>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '4';">4</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '5';">5</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '6';">6</A></TD>
    <TR>
    <TR>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '7';">7</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '8';">8</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '9';">9</A></TD>
    <TR>
    <TR>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + ',';">,</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '0';">0</A></TD>
        <TD WIDTH="20" ALIGN="center"><A HREF="#" onclick="number.value=number.value + '.';">.</A></TD>
    <TR>
</TABLE><BR />
<BUTTON TYPE="submit">Show result</BUTTON><BR /><BR />

Answer 1

检查浏览器控制台会显示number is not defined。

为了引用表单中的字段，首先给表单命名：

<form name="calculator" ... >

然后使用点表示法选择特定的DOM元素，如下所示：

document.calculator.number;

现在，您可以像这样附加到此对象的value属性：

document.calculator.number.value += '1';

修改代码（加上结束</form>代码并修复结束</tr>代码）：

<FORM name="calculator" ACTION="showcontent.htm" METHOD="post">
  <input type="text" name="number" value="">
  <TABLE BORDER="1">
    <TR>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '1';">1</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '2';">2</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '3';">3</A>
      </TD>
    </TR>
    <TR>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '4';">4</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '5';">5</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '6';">6</A>
      </TD>
    </TR>
    <TR>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '7';">7</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '8';">8</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '9';">9</A>
      </TD>
    </TR>
    <TR>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += ',';">,</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '0';">0</A>
      </TD>
      <TD WIDTH="20" ALIGN="center">
        <A HREF="#" onclick="document.calculator.number.value += '.';">.</A>
      </TD>
    </TR>
  </TABLE>
  <BR />
  <BUTTON TYPE="submit">Show result</BUTTON>
  <BR />
  <BR />
</FORM>

在javascript中多次点击填充输入字段

1 个答案: