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

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

javascript html

Javascript 从文本字段获取输入并插入HTML中创建的表,javascript,html,Javascript,Html,因此，我有3个文本字段供用户输入，当输入文本并按下“注册”按钮时，我希望创建一个具有3个单元格（每个字段一个）的新行，显示用户输入的文本。但就我的一生而言，我不知道如何从文本字段捕获输入并将其插入表格单元格。我尝试过使用document.getElementbyId和.innerHTML，但似乎不起作用现在“未定义”只是出现在单元格中学生页 src=“registerBox.js” 学生页，共页这是课程表课程课程号房间登记函数addCourse（）{ var i=1； var

因此，我有3个文本字段供用户输入，当输入文本并按下“注册”按钮时，我希望创建一个具有3个单元格（每个字段一个）的新行，显示用户输入的文本。但就我的一生而言，我不知道如何从文本字段捕获输入并将其插入表格单元格。我尝试过使用document.getElementbyId和.innerHTML，但似乎不起作用

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


学生页
src=“registerBox.js”
学生页，共页
这是课程表
课程
课程号
房间
登记
函数addCourse（）{
var i=1；
var行=已登记。插入行（i）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var courseName；
document.getElementById（“courseName”）.innerHTML=courseName；
cell1.innerHTML=courseName；
cell2.innerHTML=“test2”；
cell3.innerHTML=“test3”；
}

你就快到了。问题在于这一行：

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

要获取id为

“courseName”

的输入值，并将其设置为名为

courseName

的变量，您应该执行以下操作：

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


学生页
src=“registerBox.js”
学生页，共页
这是课程表
课程
课程号
房间
登记
函数addCourse（）{
var i=1；
console.log（已注册）
var行=已登记。插入行（i）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var courseName=document.getElementById（“courseName”）.value；
cell1.innerHTML=courseName；
cell2.innerHTML=“test2”；
cell3.innerHTML=“test3”；
}

如果您使用的是vanilla JS，那么您只需使用一个简单的

让courseName=document.getElementById（“courseName”）.value
如果您想使用jQuery，那么这就足够了：
让coursename=$（“#coursename”）.val（）
您的主要问题是，您假设JS将表单元素视为与文本元素相同的元素，但它是一个不同的猴子。
尝试以下方法：
<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>


学生页
src=“registerBox.js”
学生页，共页
这是课程表
课程
课程号
房间
登记
函数addCourse（）{
var i=1；
var行=已登记。插入行（i）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（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；
}