Javascript 形式和对象_Javascript_Javascript Objects

Javascript 形式和对象

javascript

Javascript 形式和对象,javascript,javascript-objects,Javascript,Javascript Objects,我需要关于如何正确构造此的帮助。我的目标是我可以在表格上输入一个人的名字和科目，并让它显示学生对该科目的分数。我不知道该怎么做。如你所见，我不知道如何设置。有没有关于如何解决这个问题的建议 HTML代码好的……我对html和JavaScript代码都做了一些更改在html中，您不需要td有一个id，而是我为输入元素添加了id。以下是修改后的html代码： <body> <form name="reportcard"> <ta

我需要关于如何正确构造此的帮助。我的目标是我可以在表格上输入一个人的名字和科目，并让它显示学生对该科目的分数。我不知道该怎么做。如你所见，我不知道如何设置。有没有关于如何解决这个问题的建议

HTML代码

好的……我对html和JavaScript代码都做了一些更改

在html中，您不需要td有一个id，而是我为输入元素添加了id。以下是修改后的html代码：

    <body>

    <form name="reportcard">
        <table>
            <tr>
                <td>Enter Student's name here:</td>
            </tr>
            <tr>
                <td>Student Name:</td>
                <td>
                    <input id="student" type="text" name="student1">
                </td>
            </tr>
            <tr>
                <tr>
                    <td>Subject</td>
                    <td>
                        <input id="subject" type="text" name="subject1">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Compute" onclick="callParents();">
                    </td>
                </tr>

                <p id="hello"></p>

    </form>

</body>

</html>

在JavaScript代码中，我没有将所有student对象分开，而是将它们放在student list的单个集合中。这样循环就更容易了。还添加了额外的代码来检查学生姓名和成绩

以下是修改后的JavaScript代码：

    function Student(name, art, science, english, spanish, shop, socialScience, gym) {
    this.aname = name;
    this.math = art;
    this.science = science;
    this.english = english;
    this.spanish = spanish;
    this.shop = shop;
    this.socialScience = socialScience;
    this.gym = gym;
}

var johnSmith = new Student("John Smith", "B", "A", "A", "F", "A", "B", "A");

var janeSmith = new Student("Jane Smith", "A", "B", "C", "A", "F", "C", "A");

var jackSmith = new Student();
jackSmith.aname = "Jack Smith";
jackSmith.math = "A";
jackSmith.shop = "A";


var studentList = [];
studentList.push(johnSmith);
studentList.push(janeSmith);
studentList.push(jackSmith);





function callParents() {

    var name = document.getElementById('student').value;

    var sub = document.getElementById('subject').value;

    for (var i = 0; i < studentList.length; i++) {
        if (studentList[i].aname == name) {
            if (studentList[i][sub] == 'F') {
                console.log("Call Parents!!!");
            } else {
                console.log("Student is doing fine in school");
            }
            break;
        }
    }
}

这里是

您应该有一个包含学生条目的对象，充当学生姓名和成绩之间的映射。然后将事件侦听器添加到按钮并调用编辑输出的函数

这就是它的样子：

var students = {};
students["John Smith"] = new Student ("John Smith", "B", "A", "A", "F", "A", "B", "A");
students["Jane Smith"] = new Student ("Jane Smith", "A", "B", "C", "A", "F" , "C", "A");
students[jackSmith.aname] = jackSmith;

document.getElementById('submit').addEventListener('click', callParents);

var student = document.getElementById('student1');
var subject = document.getElementById('subject1');
var output = document.getElementById('output');

function callParents() {
    if (subject.value && student.value) {       
        var grade = students[student.value][subject.value];
        output.innerHTML = grade === 'F' ? 'Call parents!' : grade;
    }
}

JSfiddle：

    function Student(name, art, science, english, spanish, shop, socialScience, gym) {
    this.aname = name;
    this.math = art;
    this.science = science;
    this.english = english;
    this.spanish = spanish;
    this.shop = shop;
    this.socialScience = socialScience;
    this.gym = gym;
}

var johnSmith = new Student("John Smith", "B", "A", "A", "F", "A", "B", "A");

var janeSmith = new Student("Jane Smith", "A", "B", "C", "A", "F", "C", "A");

var jackSmith = new Student();
jackSmith.aname = "Jack Smith";
jackSmith.math = "A";
jackSmith.shop = "A";


var studentList = [];
studentList.push(johnSmith);
studentList.push(janeSmith);
studentList.push(jackSmith);





function callParents() {

    var name = document.getElementById('student').value;

    var sub = document.getElementById('subject').value;

    for (var i = 0; i < studentList.length; i++) {
        if (studentList[i].aname == name) {
            if (studentList[i][sub] == 'F') {
                console.log("Call Parents!!!");
            } else {
                console.log("Student is doing fine in school");
            }
            break;
        }
    }
}

var students = {};
students["John Smith"] = new Student ("John Smith", "B", "A", "A", "F", "A", "B", "A");
students["Jane Smith"] = new Student ("Jane Smith", "A", "B", "C", "A", "F" , "C", "A");
students[jackSmith.aname] = jackSmith;

document.getElementById('submit').addEventListener('click', callParents);

var student = document.getElementById('student1');
var subject = document.getElementById('subject1');
var output = document.getElementById('output');

function callParents() {
    if (subject.value && student.value) {       
        var grade = students[student.value][subject.value];
        output.innerHTML = grade === 'F' ? 'Call parents!' : grade;
    }
}