Beginner Javascript Advice

Question

I'm new to Javascript and I can't understand why my code is not printing. I take in user input and it is supposed to print out to the textbox; can anyone help?

Forgive my ignorance, I'm a complete newbie with this.

Here's my code:

var $ = function(){
    return document.getElementById(arguments[0]);
}
var protoStudent = {
    college: "Athlone Institute of Technology",
    course: "BSc (Hons) Software Design (Cloud computing)"
}
var createStudent = function(id, name, age){
    var student = object.create(protoStudent);
    student.id = id;
    student.name = name;
    student.age = age;

    student.showDetails = function(){
        return this.id + "\t" + this.name + "\t" + this.age + "\n";
    }
    return student;
}
var studentArray = [];
var addStudent = function(){
    var id = $("studentID"). value;
    var name = $("studentName").value;
    var age = $("studentAge").value;

    student = new createStudent(id, name, age);

    studentArray[studentArray.length] = student;
    showStudent();
}
var showStudent = function(){
    var string = "ID" + "\t" + "Name" + "\t" + "Age" + "\n";
    for (var i in studentArray){
        string += studentArray[i].showDetails();
    }
    $("output").value = string;
}
window.onload = function(){
    $("add").onclick = addStudent;
}

The html is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Student Register</title>
    <link rel="stylesheet" type="text/css" href="StudentRegister.css" />
    <script type="text/javascript" src="StudentRegister.js"></script>
    <script type="text/javascript" src="shortcuts.js"></script>
</head>
<body> 
    <div id="content">
        <h1>Student Register</h1>

        <label for="studentID">Student ID:</label>
        <input  type="text" 
                id="studentID" 
                value="enter student ID here" 
                onfocus="this.value=''" /><br />

        <label for="studentName">Student name:</label>
        <input  type="text" 
                id="studentName" 
                value="enter student name here" 
                onfocus="this.value=''" /><br />

        <label for="studentAge">Student age:</label>
        <input  type="text" 
                id="studentAge" 
                value="enter student age here" 
                onfocus="this.value=''" /><br />

        <br />
        <label>&nbsp;</label>
        <input  type="button" 
                id="add" 
                value="Add" /><br />
        <textarea id="output" rows="10" cols="60"></textarea>
    </div>
</body>
</html>

might just be a copy and paste error but you have an extra space here "var id = $("studentID"). value;" — Dane, Oct 26 '15 at 15:23
@Dane I hadn't actually noticed that but it hasn't made a difference, it's still not printing anything — this_is_cat, Oct 26 '15 at 15:26
Other beginner details: You forgot to `var`-declare `student` in `addStudent`, [you should not use `for in` on arrays](http://stackoverflow.com/q/500504/1048572), and you don't need to (should not) use `new` with `createStudent`. — Bergi, Oct 26 '15 at 15:32
@Bergi That's really helpful, I'll keep that in mind; thank you. — this_is_cat, Oct 26 '15 at 15:38

Mark · Accepted Answer · 2015-10-26T15:32:21.537

4

When I tested your code the browser immediatly gave me this error:

Uncaught ReferenceError: object is not defined. test.php Line 15

Looking at line 15, you have:

var student = object.create(protoStudent);

However, as a case sensitive language you need:

var student = Object.create(protoStudent);

Javascript does not recognize your call to 'object' because only 'Object' is recognized as having the create method.

I tested, and this was working for me.

EDIT: On further reflection, you should check out jQuery so you don't have to declare $ for yourself.

edited Oct 26 '15 at 15:32

answered Oct 26 '15 at 15:30

Mark

861
9
17

Good find, this was like looking for a needle in a bomb infested haystack! – Dane Oct 26 '15 at 15:31
jQuery is a lot heavier than this declaration, so if one is *only* desiring ID lookups with `$` I think it's better to do this (assuming you aren't interested in all the other functionality that jQuery would provide). – Dan Lowe Oct 26 '15 at 15:35
Thank you so much, my head was hurting from staring at this for so long. It works! And I will definitely check out jQuery. – this_is_cat Oct 26 '15 at 15:36
@DanLowe My assumption is that he only needs the ID lookup right now on this one page...but what happens when he needs an AJAX request? Or to clear out some HTML from a div? I just don't believe in re-inventing the wheel because I only need a tiny subset of functionality...but even if that is the case, you can customize jQuery to only load modules that fit your needs. – Mark Oct 26 '15 at 16:44

Beginner Javascript Advice

1 Answers1