Question

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

现在＆＃34;未定义＆＃34;刚刚出现在牢房中。

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

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

＆＃13;

<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>

＆＃13;

Answer 2

如果您使用的是vanilla JS，那么您可以使用简单的

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

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

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

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

Answer 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>

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

3 个答案: