输入 type="text" 到 innerHTML

Question

如何在 <input type="text"> 中输入 2 个玩家名称，然后使用 JavaScript 将它们写在 <table> 中的 <th> 标签中，使用 innerHTML 作为<th>?

这是一个 JSFiddle： JSFiddle

Answer 1

是的，您必须使用 innerHTML。请看下面的代码片段。请注意，您应该为 html 元素指定不同的 ID。元素的 id 应该是唯一的。

function saveNames(){

    // get the first's player name.
    var player1name = document.getElementById("player1name").value;
  
    // get the second's player name.
    var player2name = document.getElementById("player2name").value;
  
    // set the first's player name in the corresponding th.
    document.getElementById("player1").innerHTML = player1name;
  
    // set the second's player name in the corresponding th.
    document.getElementById("player2").innerHTML = player2name;
}

table {
    border-collapse: collapse;
    margin:10px;
}
table, th, td {
    border: 1px solid black;
    padding:5px;
}
td {
    text-align:center;
    width:60px;
}

<div class="playerinputsection">
    <label for="player1name">Player 1</label>
    <br>
    <input type="text" name="playernames" id="player1name">
</div>
<div class="playerinputsection">
    <label for="player2name">Player 2</label>
    <br>
    <input type="text" name="playernames" id="player2name">
</div>
<br>
<button onclick="saveNames()">Save names</button>
<br>
<br>
<table>
    <tr>
        <th id="player1"></th>
        <th id="player2"></th>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
    </tr>
</table>

对于这种情况，使用 MVVM 库会更优雅，例如 Knockout.js。但是，使用普通的 JavaScript 可以得到相同的结果。当您必须构建更复杂的 UI 时，提到的库显示了它的强大功能。

输入 type="text" 到 innerHTML

Input type="text" to innerHTML

javascript

input

innerhtml