从 HTML 输入字段更改 Javascript 中的文本答案

【问题标题】：Changing Text in Javascript From HTML Input Field从 HTML 输入字段更改 Javascript 中的文本
【发布时间】：2016-04-01 18:12:28
【问题描述】：

所以我正在设置 Jeopardy 游戏。

对于网格，我使用的是 HTML 表格。第一行现在有通用文本（例如“类别 1 名称”）。

在第一行上方会有另一个带有 HTML 输入框的表格，用户可以在其中将类别名称更改为他们想要的任何名称。

我的问题是，我以为我会使用document.getElementById("").innerHTML 等来执行此操作，但那不起作用。

如何使用户可以在表单字段中输入文本并且该条目会更改表格单元格 (td) 中的文本？这就是我现在输入字段的内容：

<table id="table1">
    <tr>
        <td>
            <form>
                <input type="text" placeholder="Category 1 Name">
                <button>Submit</button>
            </form>
        </td>
    </tr>
</table>

这是我想要更改文本的框：

<table>
    <tr>
        <td class="cat1">Category 1 Name</td>
    </tr>
</table>

谢谢。

【问题讨论】：

好吧，getElementById() 仅在您的元素具有 id 时才有效。

标签： javascript forms text input

【解决方案1】：

这个解决方案适合你吗？：

function setCat1Name() {
  document.getElementsByClassName("cat1")[0].textContent = document.getElementById("myInput").value
}

<table id="table1">
  <tr>
    <td>
      <form>
        <input id="myInput" type="text" placeholder="Category 1 Name">
        <button onclick="setCat1Name()">Submit</button>
      </form>
    </td>
</table>

<table>
  <tr>
    <td class="cat1">Category 1 Name</td>
  </tr>
</table>

【讨论】：