I am trying to make a website where there are portraits of people and a user will be able to click on a portrait to see more information about that person. There will a text box underneath that will change text description when each profile is clicked.

I am trying to make the image a button of sorts then apply a click event via java script to change description text text.

The following code i have is:

HTML5

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>About</title>
    <link rel="stylesheet" type="text/css" href="Styles.css" />
    <script src="Scripts/jquery-3.3.1.intellisense.js"></script>
    <script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <header>
        <img src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />
        <h1 id="title">
            CompTech Inc. 2018 Conference
        </h1>
    </header>
    <nav id="navbar">
        <span>
            <a href="Indedx.html">Home</a>
            <a href="Program.html">Program</a>
            <a href="About.html" class="inactivelink">About</a>
            <a href="Registration.html">Registration</a>
            <a href="Sitemap.html">Sitemap</a>
        </span>
    </nav>

    <main>
        <div id="container">
            <article>
                <section id="personnel">
                    <h2>Personnel</h2>
                    <p>Find out more about the staff that you will be meeting at the event</p>
                    <button id="jim" class="profile"></button>
                    <button id="arcturus" class="profile"></button>
                    <button id="sarah" class="profile"></button>
                    <button id="jaina" class="profile"></button>
                    <div id="descriptioncontainer">
                        <p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
                    </div>
                </section>
            </article>
        </div>
    </main>

    <footer>
        <img src="Images/Logo.png" id="logofooter" class="logo" alt="CompTech Logo" />
        <p>
            <strong>&#169; Copyright CompTech Inc.</strong> <br />
            <address>123 Knotareal Pl, Sydney CBD, NSW, 2018</address>
            customerservice@comptech.org <br />
            (02) 6258 7412
        </p>
    </footer>

    <script src="About.js"></script>
</body>
</html>

```

JS

```
(function clickEvent() {
    var portraits = document.getElementByClassName("profile");

    var counter;
    for (counter = 0; counter < profile.length; counter++) {

        portraits[counter].onclick = function () {

        }
    }
        })

```

CSS

```
button.profile.active, button.profile:hover {
    cursor:pointer;
}

.profile {
    width: 250px;
    height: 250px;
    display: inline-block;
    margin-top:2%;
}

#jim {
    background-image: url('Images/JimRaynor.png');
}

#arcturus {
    background-image: url('Images/ArcturusMensk.png');
}

#sarah {
    background-image: url('Images/SarahKerrigan.png');
}

#jaina {
    background-image: url('Images/JainaProudmore.png');
}

#descriptioncontainer {
    border-style:solid;
    border-color:whitesmoke;
    padding:5px;
    min-height:100px;
}

```

Am I on the right track and where do go from here?
any help would be appreciated