Adding Buttons explainer

The aim of this puzzle: Add a 'like' button underneath each animal’s description on the webpage.

Walkthrough of the solution: In this puzzle, you’ll use the createElement method, the textContent attribute, and the appendChild method to add a button underneath each animal’s description.

To complete the puzzle, inside the for…of loop, create a variable called button that stores a new button element using document.createElement('button'). Then, set its text content to 'Like'. Finally, append it to the body. Make sure it’s appended after animalName, picture, and description or else it won’t appear in the right place on the webpage.

HTML Concepts: <button>
JavaScript Concepts: .textContent,.createElement(), document, body,.appendChild()`, for…of loop, import

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[3];
    document.body.appendChild(button);
}

program says that it is not appending in the correct order, but i have it in the order it say to have.
Below is the message i get.

The elements have been appended in the wrong order. Make sure they follow this order: <h1> , <h2> , <img> , <p> , <button> .

Hey there, looks like you’re getting a feedback message that isn’t helpful. The actual problem in the code is this line:

button.textContent = like[3];

Change it to this:

button.textContent = 'Like'

Hope this helps!
Ben

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

}

Now I get the below error.

The button.textContent is in the wrong place. Make sure it’s the last piece of code inside the for…of loop, below the button variable declaration.

nevermind i fixed it.

thank you

how did you fix it? i’m not sure what to change for this piece

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

Hey there, make sure you have quotes around 'Like', as it’s a string.

-Ben

Hello, I’m unsure what I’m doing wrong. It keeps saying " Below the button variable declaration, set its .textContent to 'Like' . For example, button.textContent = 'Like'
This is my 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.textContext = 'Like';    
    document.body.appendChild(button);

}
1 Like

Hey there, it looks like there’s a small typo in textContent. Yours says textContext. Fixing that issue should solve the problem.

Hope this helps!
Ben

1 Like

Thank you so much, I have been stuck on this for a while now! This was very helpful!

Ok, So, I have tried every possible avenue to solving the “Button” scenario. read through all the posts and no solution to solving it yet, Here’s what I got:

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.getElementById('button');
    button.textContent = 'like';
    document.body.appendChild(button);
}

Can I get a hand solving this issue, Thanks, Dex

Hey there, where you’re declaring the button variable, change document.getElementById('button') to document.createElement('button').

getElementById is used to fetch elements that already exist. Because there are no buttons, it isn’t able to find anything. Use createElement instead to create this button.

again, I tried that and it STILL didn’t work.

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.createElement('button');
    button.addEventListener(‘click’, () => {
        if(button.textContent === 'Like') {
            button.textContent = 'Like-d!';
        }
        else {
            button.textContent = 'Like';
        }
        
        
    })
// EOF
 }

Ben, I’ve been wrestling with this and I’m still not getting it right, The error msg states " if the test is true, the button.textContent should be assigned ‘Liked!’ " Which I have done. What’s wrong?

Dex Auda

You’re almost there! It looks like there’s a small typo in ‘Liked!’

Remove the - and the puzzle should complete.

again, I tried that and it STILL didn’t work, next option

I see the problem. The quotes around ‘click’ are bad.

When users post text on the forum, the browser will change quotes to special font quotes often called “smart quotes”. These are more readable by humans, but are not valid programming quotes.

This can be prevented by pasting your code in code blocks using 3 backticks before and after the code, which you can read about here.

I often edit user posts to put their code in blocks (I just edited yours), but I only get about half of them.

You copy/pasted code from another user’s solution, but that user didn’t put their code in a block, so the quotes got messed up. That’s how you ended up with bad quotes in your code.

This is a common problem in programming, as copy/pasting solutions found in online forums is a normal part of writing code (e.g. Stack Overflow). You can read more about this here.

-Ben

I got the code right

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');
document.body.appendChild(button);

button.textContent = ‘Like’

}

Hi @Grasshopper_Ben,

What is the additional code in this puzzle?

Please answer.

Thanks!
D :slight_smile: