Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects The Build an Object Challenge, Part 2 Solution

Anik Devaughn
Anik Devaughn
7,751 Points
Posted by Anik Devaughn
Anik Devaughn
7,751 Points

The Build an Object Challenge, Part 2 Solution, Having trouble with the StudentList code

I am having some issues with my Students code (The Build an Object Challenge, Part 2 Solution By Dave ) My code works fine , what I have done is , created two button, one to search student by name ( which I haven’t implemented yet but I will soon), the problem is with my second button 'Show StudentList' , so when clicked on ‘show studentList’ button I should be able to see all the students. But what happens it flashes very quickly when clicked on the showStudentList button and I am not able to see the information. The student list disapears very quickly. And here is what I need help with.

Can please anyone help me out here with this, what mistakes I have made to make this behaviour. Secondly, I have another issue with the Buttons, I want to have them in same line ( have tried with inline.block) but it’s not working. How can I have both my button on the same line instead of having them in saperate line. I know that this is not HTML or CSS tutorial, but really will appreciate all your help. Thanks in Advance!!!

--

//=======================
My index.html code:
//=======================

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="css/styles.css" rel="stylesheet" />
    <title>Search Students by name</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <div id="page-banner">
                <h1 class="title">Students App</h1>
                <p>Search student by their Name</p>
                <form id="search-student">
                    <input type="text" placeholder="Search Students..." />
                    <button>Search</button>
                    <button id="showStudent">Show StudentList</button>
                </form>
            </div>
        </header>

        <h1>Students</h1>
        <div id="StudentList">

        </div>

    </div>
    <script src="js/studentsData.js"></script>
    <script src="js/searchingStudent.js"></script>
</body>
</html>
--------

//=======================
My css style :
//=======================


body {
    font-family: Tahoma;
    color: #444;
    letter-spacing: 1px;
}

h1, h2 {
    font-weight: normal;
}

#wrapper {
    width: 90%;
    max-width: 960px;
    margin: 20px auto;
    border-radius: 6px;
    box-shadow: 0px 1px 6px rgba(0,0,0,0.2);
    box-sizing: border-box;
    padding: 0 0 20px;
    overflow: hidden;
    border: 1px solid lightgray;
}

#page-banner {
    background: #eee;
    padding: 10px 0;
}

    #page-banner h1, #page-banner p {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    #page-banner input {
       width: 90%;
        width: 300px;
        margin: auto;
        display: block;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        color: #444;
    }

    #page-banner button {
        /*border: 1px solid #0094ff;*/
        background: #0094ff;
        padding: 3px; 
        font-size: 14px;
        /*display: block; */
        margin: 5px 45%;
        border-radius: 12px;
        cursor: pointer;
        width: 80px; 
        color: white;
    }

//=======================
My javascript students list:
//=======================

var students = [
    {
        fullName: "Emma emily",
        age: 12,
        email: "emma@gmail.com",
        address: "Stockholm",
        track: "front-end dev"

    },

    {
        fullName: "Emma Milston",
        age: 23,
        email: "emma23@gmail.com",
        address: "Uppsala",
        track: "iOS developer"

    },
    {
        fullName: "Sara Ericsson",
        age: 41,
        email: "Sara@gmail.com",
        address: "Stockholm",
        track: "front-end dev"

    },
    {
        fullName: "Sara Elin",
        age: 40,
        email: "Elin@gmail.com",
        address: "NewYork",
        track: "CSharp-Developer"

    },
    {
        fullName: "Adil Ahmad",
        age: 20,
        email: "adil@gmail.com",
        address: "Stockholm",
        track: "Software-Developer"

    }

];

//=======================
    My javascript functions:
//=======================

var message = '';
var student;
const showStudent = document.getElementById('showStudent');


function print(message) {
    var studentList = document.getElementById('StudentList');
    studentList.innerHTML = message;
}


showStudent.addEventListener('click', () => {
    for (var i = 0; i < students.length; i += 1) {
        student = students[i];
        message += '<h2>Student Name: ' + student.fullName + '<h2>';
        message += '<p>Age: ' + student.age + '</p>';
    }

    print(message);
});

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The button is reloading the page as a default action, but you can prevent it:

showStudent.addEventListener('click', e => {  // "e" is the event object
    e.preventDefault();                       // do not reload page (the default action)
    message = [];                             // start with empty "message"
    // rest of function the same

And the buttons are on separate lines because the 45% horizontal margins take too much room for them to be on the same line.