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!

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

Posted by mryoung
mryoung
4,156 Points

What am I doing wrong with this click event?

So, I'm trying to make a kid friendly todo list. I've got a blank list on the left and images on the right. I want it so that images on the right can be clicked, and then they add a list item onto the left. So, for example I have an image related to going to the zoo, and when clicked it adds "go to the zoo" to the list on the left.

As it is right now, when I click nothing happens. Also, when I try to open the console I don't know how to check this event (any help with that would be nice), so I'm clueless on what I'm doing wrong.

HTML:

<body>
    <h1> What Would You Like To Do Today?</h1>

    <div class='wrapper'>

    <div class='left-col'>
        <ul class='dynamic-list'>
        </ul>
    </div>

    </div>

    <div class='right-col'>
        <h2>Tap and image to add it to the list to the left:</h2>
        <div class='images'>
        <img src ='imgs/artkid.jpeg' alt = 'a kid covered in paint' id='art'>
        <img src = 'imgs/zoo.jpeg' alt = 'the letters zoo spelled with magnets' id='zoo'>
        <img src = 'imgs/readingkids.jpeg' alt = 'a kid reading' id='reading'>
        <img src = 'imgs/swimkids.jpg' alt = 'kids swimming' id='swimming'>

    </div>
    </div>
</div>

<script rel="app.js"></script>
</body>

Javascript:

const myList = document.querySelector('ul');
const imageClick = document.getElementById('art');

imageClick.addEventListener('click'),() => {
    myList.innerHTML = '<li>This goes into the list</li>'
});

1 Answer

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,073 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,073 Points

Your syntax for the event listener is wrong.

it should look like this: 

element.addEventListener('event', function() {
       // code goes here
});

or like this with es6 syntax

element.addEventListener('event', ()=> {
       // code goes here
});

Look carefully at my examples, and then your event listener, you should see what you did wrong!

If you are still stuck here is your solution:

imageClick.addEventListener('click',() => {
    myList.innerHTML = '<li>This goes into the list</li>';
});
mryoung
mryoung
4,156 Points

Thank you, I did have some syntax issues, but for some reason the list item is still never created....

Dane Parchment
Dane Parchment
Treehouse Moderator 11,073 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,073 Points

It should definitely be working, make sure that you didn't delete anything else or that you copied my answer correctly.