Listen Closely explainer

The aim of this puzzle: Add an event listener to each of the buttons so their text content changes between 'Like' and ‘Liked’` whenever they’re clicked.

Walkthrough of the solution: In this puzzle, you’ll add an event listener to the buttons to make them interactive.

To complete this puzzle, inside the for..of loop, after creating the button, add an event listener to button. Set the first argument to 'click'. Set the second argument to an arrow function.

Inside the code block {} of the arrow function, add an if…else statement that tests if the .textContent of the button is 'Like'. If it is, set its text content to 'Liked'. If it isn’t, set its text content to 'Like'.

HTML Concepts: <button>
JavaScript Concepts: Event Listener, Arrow Function, If…Else, .textContent

Hi,
I am not quite sure if this belongs here - if not just delete this or tell me where I can address my issue to - but after completing this stage of the course “Intro to webpages” I have no next course left to enter and go on with.
I finished the 2 Fundamentals, Using a Code Editor and now the Intro to webpages.
But how and where can I go on now? Because I am still missing some learnings mentioned in the grasshopper FAQs (such as Animations, Intro to Interviewing…).

Thank you in advance!

Hey there, for now, 4 of our courses are available on our website. Fundamentals I and II are available both in the app and on our site, while Using a Code Editor and Intro to Webpages are exclusive to our website.

We continuously add new content to Grasshopper, so you can expect our curriculum to grow, but for now, our other courses will need to be accessed from the Grasshopper app.

Hope this helps! Let me know if you have any questions.
Ben

3 Likes
import { animals } from 'animalShelter.data';

let title = document.createElement('h1');
title.textContent = 'Adoptable Animals';
document.body.appendChild(title);

for (let animal of animals) {
    
    let animalName = document.createElement('h2');
    animalName.textContent = animal[0];
    document.body.appendChild(animalName);
    
    let picture = document.createElement('img');
    picture.src = animal[1];
    document.body.appendChild(picture);
    
    let description = document.createElement('p');
    description.textContent = animal[2];
    document.body.appendChild(description);
    
    let button = document.createElement('button');
    button.textContent = 'Like';
    button.addEventListener('click',()=> {
        if (button.textContent === 'Like'){
            button.textContent = 'Liked';
        else
            button.textContent = 'Like';
            
        }
    });
    document.body.appendChild(button);
}

please tell me what is the error

2 Likes

I am stuck in here too.
I am confused how to use the If … Statement inside the Event Listener.

1 Like

Hey there,

It looks like the if statement’s code block isn’t closed before the else begins. Remember to put a closing bracket } to close the if statement before the else, and to put an opening bracket { after the else.

It should look something like this:

if (thisIsTrue) {
   doSomething;
} else {
   doSomethingDifferent;
}
1 Like

Hey there, post a screenshot of your code and I’ll take a look.

-Ben

Thanks for your help:

import { animals } from 'animalShelter.data';

let title = document.createElement('h1');
title.textContent = 'Adoptable Animals';
document.body.appendChild(title);

for (let animal of animals) {
    
    let animalName = document.createElement('h2');
    animalName.textContent = animal[0];
    document.body.appendChild(animalName);
    
    let picture = document.createElement('img');
    picture.src = animal[1];
    document.body.appendChild(picture);
    
    let description = document.createElement('p');
    description.textContent = animal[2];
    document.body.appendChild(description);
    
    let button = document.createElement('button');
    button.textContent = 'Like';
    document.body.appendChild(button);
    
    let button = document.getElementById('button');
button.addEventListener('click', () => 
    if button​.textContent = 'Like'; {
    button.textContent = 'Liked';
}
                                       {
    else 
    button.textContent = 'Like';
});
    
    
}
}

Hey,
im stuck somehow and cant find the error. If you could help it would be nice :slight_smile:)

import { animals } from ‘animalShelter.data’;

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for (let animal of animals) {

let animalName = document.createElement('h2');
animalName.textContent = animal[0];
document.body.appendChild(animalName);

let picture = document.createElement('img');
picture.src = animal[1];
document.body.appendChild(picture);

let description = document.createElement('p');
description.textContent = animal[2];
document.body.appendChild(description);

let button = document.createElement('button');
button.textContent = 'Like';
document.body.appendChild(button);
button.addEventListener ('click', ()=> 
if button.textContent = 'Like';{
    button.textContent = 'Liked!';
}
else {
    button.textContent = 'Like';
}

}

1 Like

Your formatting on your if statement is not correct.
Your conditional needs to go in parenthesis and contain the conditional operator, ie, if (button.textContent === ‘Like’) {…}

Remember = is an assignment operator while === checks your condition for truth

1 Like

You have incorrectly formatted your if statement
Remember that your condition must go inside parenthesis and contain a conditional operator
if (button.textContent) === ‘Like’ { … }

Remember that === checks the truth of your statement while = assigns a value to that variable.

What is the correct code for this? I have been trying for two hours and I cannot identify my mistake.

3 Likes

This has been the most frustrating puzzle.
I don’t see why either way i put my function and if statements its constantly not right.
please advise

First attempt::

import { animals } from ‘animalShelter.data’;

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for (let animal of animals) {

let animalName = document.createElement('h2');
animalName.textContent = animal[0];
document.body.appendChild(animalName);

let picture = document.createElement('img');
picture.src = animal[1];
document.body.appendChild(picture);

let description = document.createElement('p');
description.textContent = animal[2];
document.body.appendChild(description);

let button = document.createElement('button');
button.textContent = 'Like';

button.addEventListener('click',()=>{
    if(button.textContent === 'like'{
        button.textContent = 'Liked!';
    } 
    else{
        button.textContent = 'Like';
    })
})

document.body.appendChild(button);

}

Second Attempt::

import { animals } from ‘animalShelter.data’;

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for (let animal of animals) {

let animalName = document.createElement('h2');
animalName.textContent = animal[0];
document.body.appendChild(animalName);

let picture = document.createElement('img');
picture.src = animal[1];
document.body.appendChild(picture);

let description = document.createElement('p');
description.textContent = animal[2];
document.body.appendChild(description);

let button = document.createElement('button');
button.textContent = 'Like';
document.body.appendChild(button);

button.addEventListener('click', ()=>{
    if(button.textContent === 'Like'{
        button.textContent = 'Liked!'
    }
    else{
        button.textContent = 'Like';
    });
})

}

1 Like

hi Linzy_Bailey

thanks for your reply:

Already did the changes but there´s something going wrong …

import { animals } from ‘animalShelter.data’;

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for (let animal of animals) {

let animalName = document.createElement('h2');
animalName.textContent = animal[0];
document.body.appendChild(animalName);

let picture = document.createElement('img');
picture.src = animal[1];
document.body.appendChild(picture);

let description = document.createElement('p');
description.textContent = animal[2];
document.body.appendChild(description);

let button = document.createElement('button');
button.textContent = 'Like';
document.body.appendChild(button);

let button = document.getElementById('button');

button.addEventListener(‘click’, ()) => {
if (button.textContent === ‘Like’) {
button.textContent = ‘Liked’;
} else {
button.textContent = ‘Like’;
};

}
}

1 Like

I think I found it.

Your entire condition should be enclosed in ( )
You have:
if(button.textContent === ‘Like’{…
You need:
if(button.textContent === ‘Like’) {…

1 Like

Hi Jorge,

I think it’s still a wandering parenthesis.

You have:
button.addEventListener(‘click’, ()) => {…
This bold parenthesis makes the computer stop doing whatever it is you want to do on click.

Rather, you want to move this parenthesis down to close the code you want to execute on the click.
button.addEventListener(‘click’, () => {
if (button.textContent === ‘Like’) {
button.textContent = ‘Liked’;
} else {
button.textContent = ‘Like’;
};

} )
}

1 Like

So I have been scratching my head on this one for two days now and still can’t figure out what I am doing wrong. See the code I have below;

import { animals } from ‘animalShelter.data’;

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for (let animal of animals) {

let animalName = document.createElement('h2');
animalName.textContent = animal[0];
document.body.appendChild(animalName);

let picture = document.createElement('img');
picture.src = animal[1];
document.body.appendChild(picture);

let description = document.createElement('p');
description.textContent = animal[2];
document.body.appendChild(description);

let button = document.createElement('button');
button.textContent = 'Like';
document.body.appendChild(button);}
button.addEventListener('click', () => {
if (button.textContent === ‘Like’) {
button.textContent = ‘Liked’;
} else {
button.textContent = ‘Like’;
}

}

1 Like

Hi @BenM ,

When you called the event listener, you opened a parenthesis that you never closed.

button.addEventListener('click', () => {  //You open the parenthesis to contain your event listener code
if (button.textContent === ‘Like’) {
button.textContent = ‘Liked’;
} else {
button.textContent = ‘Like’;
}  **)** //and you need to close it out here when your event listener code is complete

}

HI @Linzy_Bailey I added the parenthesis where you said and I am still not getting it to complete…

button.addEventListener(‘click’, () => {
if (button.textContent === ‘Like’) {
button.textContent = ‘Liked’;
} else {
button.textContent = ‘Like’;
})
}

It also keeps giving me the hint not to put a function in a For…of loop?