表單和對象

我需要關於如何正確構造這個的幫助。我的目標是，我可以在表格上鍵入一個人的姓名和主題，並讓它顯示該科目的學生成績。我不知道如何解決這個問題。正如你所看到的，我不知道如何設置它。有關如何攻擊這個的任何建議？表單和對象

HTML代碼

<form name="reportcard"> 
     <table> 
      <tr><td>Enter Student's name here:</td></tr> 
      <tr> 
       <td>Student Name:</td> 
       <td id="student"><input type="text" name="student1"></td> 
      </tr> 
      <tr> 
      <tr> 
       <td>Subject</td> 
       <td id="subject"><input 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>

的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"; 

function callParents() { 
    if (jackSmith.shop === "F") { 
    console.log("Call Parents!!!"); 
    } else { 
    console.log("Student is doing fine in school"); 
    }

來源

2014-07-10 Iditarod1973

的jsfiddle：http://jsfiddle.net/k7ap2/ – Iditarod1973

好吧......我已經到這兩個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代碼，而不是使所有的學生對象分開，我已經使他們成爲學生名單的一個集合。所以它會更容易循環。並且還添加了額外的代碼來檢查學生姓名並檢查成績。

下面是修改後的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; 
     } 
    } 
}

這裏是DEMO

來源

2014-07-10 05:57:49 iJade

您應該對學生條目的對象，作爲學生的姓名和成績之間的映射。然後你添加一個事件監聽器到按鈕並調用編輯輸出的函數。

這是怎麼可能看起來像：

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

FIDDLE

來源

2014-07-10 06:02:03 Mosho

使用addEventListener不工作。任何想法爲什麼？ – Iditarod1973

回答

相關問題