如何显示 HTML 表单的用户输入

Question

我已经编写了下面的代码（我的代码的一部分），但我不明白为什么它不会在 web 页面上以表格形式显示用户输入。

 <form> <label for="img_tag"> What is the above picture? </label><br> <input type="text" name="What is the above picture?" id="input"> <input type="button" id="submit-button" value="Submit" onclick="insert_result()"> </form> </div> </div> <div id="result_table"> <table> <tr> <th> Image </th> <th> Tag </th> </tr> <tr id="results"> </tr> </table> </div> <script type="text/javascript"> var input = document.getElementByID("input").value; var result_row = document.getElementByID("results"); var new_row = document.createElement("td"); function insert_result() { result_row.appendChild(new_row); new_row.append(input); } </script>

Answer 1

1. 拼写 getElementById
2. 移动获取需要它的 function 内部的输入值
3. 你每次都需要一个新的单元格，否则你只需移动单元格

您可能还需要为每个输入创建一个新行

 const inputField = document.getElementById("input"); const result_row = document.getElementById("results"); function insert_result() { let input = inputField.value; let new_row = document.createElement("td"); new_row.append(input); result_row.appendChild(new_row); }

 <form> <label for="img_tag"> What is the above picture? </label><br> <input type="text" name="What is the above picture?" id="input"> <input type="button" id="submit-button" value="Submit" onclick="insert_result()"> </form> <div id="result_table"> <table> <tr> <th> Image </th> <th> Tag </th> </tr> <tr id="results"> </tr> </table> </div>