Listen Closely explainer

Mine throws the same caution, but it runs.

I think that it’s most likely a curly brace as that is the only thing that may not be identical to mine.

After all your code is written, you need to make sure each open brace has a mate.
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’;
} //this one closes the else block
}) //this one closes the block of code opened with the arrow notation. The parenthesis closes your event listener

} // and this one closes your for loop

Still nothing :frowning:

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’;
};

})
}

I don’t think you need this line:
let button = document.getElementById(‘button’);

if you delete it, it should work

1 Like

Thanks four your help but already tried it that way and no good …

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’;
};

})
}

I’m about out of ideas. The only thing I see is a semi colon that I did not have, but when I put it into my solution, it ran with a warning anyway.

The directions do say to change the text to “Liked!” with an exclamation point which it appears you omitted. That obviously wouldn’t stop your program from running but it is possible that it is preventing you from moving on.

Are you getting any error messages from the editor that may be a clue?

1 Like

Just curious, if you remove that line, how does the program know to create a button? Did you manage to solve it without that line?

1 Like

Another thing I noticed, is that if you’ve copied and pasted any of the code, your apostrophes may become smart apostrophes instead of the straight apostrophes – that gave me several errors when I copied your code.

In this line above, ‘click’ has curly apostrophes:
button.addEventListener(‘click’, () => {

I guess these are not called apostrophes but single quotes… I don’t know what they call them in coding.

1 Like

This worked for me.

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'}
        });
}
6 Likes

@Grasshopper_Ben

I cannot spell :man_facepalming: code works now, Ben was right i misspelled Listener. (you can see the misspelling in my commented out code).

I tried changing the test to check the length of the string rather than the content itself; and I’m still getting the same error that’s preventing compilation as far as I can tell.

That error is: TypeError: Cannot read property ‘apply’ of undefined
I also have a warning at line 25 stating: “Don’t make functions within a loop” which seems to directly contradict the instructions of:

Inside the for…of loop, after creating the button:
** Add an event listener to the button*
** Use 'click' as the 1st argument*
** Use an arrow function as the 2nd argument*

Code is below, i’ve tried everyone else’s solution(s) above and only @Nicholas_Lewandowski 's code worked, still has the warning. WARNING If you copy/paste his code, all text outside of the quote block (i.e. background gray) changed the single quotes into something else, and will need to be changed back before the code editor will recognize it as code.

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';
    console.log(button.textContent.length);
    document.body.appendChild(button);
    //thank you Grasshopper_Ben button.addEventListner('click', () => {
     button.addEventListener('click', () => {
        if (button.textContent.length === 4){
            button.textContent = 'Liked!';
        } else {
            button.textContent = 'Like';
        }
    })
    
    /*button.addEventListner('click', () => {
        if (button.textContent === 'Like') {
            button.textContent = 'Liked!';
            } 
            else {
                button.textContent = 'Like';
            
            }
            });*/
        
       
}

Yes, this was solved without that line.
I looked up the difference between the two methods on the internet (as I am new to .js):

They are two different things
getElementById selects an element using their id which is present in your DOM

But
createElement creates a new Element which can be inserted into the DOM

Hey there,

It looks like .addEventListener is misspelled. That’s causing the TypeError.

Hope this helps!
Ben

Hey there,

When pasting code into the forum, first put 3 backticks ``` above and below the code (six backticks altogether). That will preserve formatting. You can also write “javascript” next the top 3 backticks, without a space separating them, and it will highlight the code more effectively.

For example, here’s a code block I created with 3 backticks above and below the code, with javascript written at the top:

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

Here’s a formatting guide I found from a separate forum that also uses Discourse.

Hope this helps!
Ben

Hey there, try posting a screenshot of your code, and include any error message you see. That will make debugging a little easier.

Thanks!
Ben

Those are called “smart quotes”, and they are the bane of many a copy-pasting programmer’s existence.

else statement was not within { }

OK so im a bit confused on what Im doing wrong: In instruction you are asked to add: Inside the for…of loop, after creating the button:
My code is:

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';
    }
};

error message Im getting is Don’t make functions within a loop!
If someone could please help me out

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';
        }
    });
}

Seem to be getting some type of error that days “Don’t create functions inside of loop”, not sure if anyone else has been getting this but im kind of stuck

Hey there, you can ignore that warning in the editor about functions in a loop, it’s part of the editor’s built-in linter (which is a useful tool that yells at you as you write code, but is sometimes wrong).

The actual error is here:

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

Capitalize the L in addEventListener(). Then, remove that ) after 'click', and move it to after the last closing } so it looks like this:

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

Hope this helps!
Ben

I still can’t get it to work…

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

Keep getting the .

Try adding button.addEventListener() at the bottom of the for…of loop, after the line: document.body.appendChild(button) .

But it is already there…Looks identical to me to the final post on the support and can’t move on…

Anyone who feels stuck and guidance, I just uploaded a video on it…
(I’m a Newbie, I am no expert nor can i thoroughly explain these algorithm)
However, I Hope you find it helpful…
(Tag people who may need help, if you do see this comment… Thank you )

2 Likes