从文本字段中获取输入并插入到 HTML 中创建的表中答案

【问题标题】：Taking input from text field and inserting into created table in HTML从文本字段中获取输入并插入到 HTML 中创建的表中
【发布时间】：2017-10-26 22:36:56
【问题描述】：

所以我有 3 个文本字段供用户输入，当输入文本并按下“注册”按钮时，我希望创建一个包含 3 个单元格（每个字段一个）的新行，以显示用户输入的文本。但是对于我的生活，我无法弄清楚如何从文本字段中捕获输入并将其插入表格单元格中。我尝试过使用 document.getElementbyId 和 .innerHTML，但它似乎不起作用。

现在“未定义”只出现在单元格中。

<html>
        <head>
                <link type="text/css" rel = "stylesheet" href= "StudentStyle.css">
        
                <title>Student Page</title>
        
                <script type ="text/javascript">src = "registerBox.js" </script>
        
            </head>
            <body>
                <div id = "all">
        
                <h1 align="center">Student page of NAMEHERE</h1>
                    <h2 align="center">NAMEHERE's Class Schedule</h2>
                    
            

            <table id ="enrolled" align="center">
                <tr id ="titleRow">
                        <th>Course</th>
                        <th>Course Number</th>
                        <th>Room</th>
                </tr>

               
            </table>
                
            <div id = "registerBox">
                <button onclick="addCourse()">Register</button>
                <input type = "text" id = "courseName" placeholder= " Course Name">
                <input type = "text" id = "courseNumber" placeholder = "Course Number">
                <input type = "text" id = "Room" placeholder = "Room">
            </div>

                </div>

                <script>
                    function addCourse() {
                        var i = 1 ;
                        var row = enrolled.insertRow(i);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);

                        var courseName;

                        document.getElementById("courseName").innerHTML = courseName;
                        
                        cell1.innerHTML = courseName;
                        cell2.innerHTML = "test2";
                        cell3.innerHTML = "test3";
                    }
                </script>
            </body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

你快到了。问题是这一行：

document.getElementById("courseName").innerHTML = courseName;

要获取 id 为 "courseName" 的输入值并将其设置为名为 courseName 的变量，您应该这样做：

var courseName = document.getElementById("courseName").value;

<html>
        <head>
                <link type="text/css" rel = "stylesheet" href= "StudentStyle.css">
        
                <title>Student Page</title>
        
                <script type ="text/javascript">src = "registerBox.js" </script>
        
            </head>
            <body>
                <div id = "all">
        
                <h1 align="center">Student page of NAMEHERE</h1>
                    <h2 align="center">NAMEHERE's Class Schedule</h2>
                    
            

            <table id ="enrolled" align="center">
                <tr id ="titleRow">
                        <th>Course</th>
                        <th>Course Number</th>
                        <th>Room</th>
                </tr>

               
            </table>
                
            <div id = "registerBox">
                <button onclick="addCourse()">Register</button>
                <input type = "text" id = "courseName" placeholder= " Course Name">
                <input type = "text" id = "courseNumber" placeholder = "Course Number">
                <input type = "text" id = "Room" placeholder = "Room">
            </div>

                </div>

                <script>
                    function addCourse() {
                        var i = 1 ;
                        console.log(enrolled)
                        var row = enrolled.insertRow(i);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);

                        var courseName = document.getElementById("courseName").value;
                        
                        cell1.innerHTML = courseName;
                        cell2.innerHTML = "test2";
                        cell3.innerHTML = "test3";
                    }
                </script>
            </body>
</html>

【讨论】：

【解决方案2】：

如果你使用的是 vanilla JS，那么你可以使用一个简单的

let courseName = document.getElementById("courseName").value;

如果你想使用 jQuery，那么这就足够了：

let coursename = $("#courseName").val();

您的主要问题是您假设 JS 将表单元素视为与文本元素相同，但它是不同的猴子。

【讨论】：

【解决方案3】：

试试这个：

<html>
        <head>
                <link type="text/css" rel = "stylesheet" href= "StudentStyle.css">

                <title>Student Page</title>

                <script type ="text/javascript">src = "registerBox.js" </script>

            </head>
            <body>
                <div id = "all">

                <h1 align="center">Student page of NAMEHERE</h1>
                    <h2 align="center">NAMEHERE's Class Schedule</h2>



            <table id ="enrolled" align="center">
                <tr id ="titleRow">
                        <th>Course</th>
                        <th>Course Number</th>
                        <th>Room</th>
                </tr>


            </table>

            <div id = "registerBox">
                <button onclick="addCourse()">Register</button>
                <input type = "text" id = "courseName" placeholder= " Course Name">
                <input type = "text" id = "courseNumber" placeholder = "Course Number">
                <input type = "text" id = "Room" placeholder = "Room">
            </div>

                </div>

                <script>
                    function addCourse() {
                        var i = 1 ;
                        var row = enrolled.insertRow(i);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);

                        var courseName;

                       courseName=document.getElementById('courseName');
                       courseNumber=document.getElementById('courseNumber');
                       room=document.getElementById('Room');
                        cell1.innerHTML = courseName.value;
                        cell2.innerHTML = courseNumber.value;
                        cell3.innerHTML = room.value;
                    }
                </script>
            </body>
</html>

【讨论】：