Cats and Dogs explainer

The aim of this puzzle: Use JavaScript to create a button and add it to a webpage.

Walkthrough of the solution:
In this puzzle, you’ll use the createElement method, the textContent property, and the appendChild method to create a button and add it to the document body.

To complete the puzzle, create a variable called dogButton that stores a new button element using document.createElement('button'). Then, set the .textContent of dogButton to a string. Finally, append the dogButton element to the body.

To complete the puzzle, create a variable
Sample code solution:
(Tap below to reveal)

JavaScript

let title = document.createElement('h1');
title.textContent = 'Cuteness';

let catImg = document.createElement('img');
catImg.src =  '../../static/images/greyTabby.jpg';

let catButton = document.createElement('button');
catButton.textContent = 'Click Here!';

let dogImg = document.createElement('img');
dogImg.src = '../../static/images/couchDog.jpg';

let dogButton = document.createElement('button');
dogButton.textContent = 'Or Here!';

document.body.appendChild(title);
document.body.appendChild(catImg);
document.body.appendChild(catButton);
document.body.appendChild(dogImg);
document.body.appendChild(dogButton);

HTML Concepts: <h1>, <img>, <button>
JavaScript Concepts: .textContent, .createElement(), document body, .appendChild(), Variables

Can some tell me what is wrong in this coding Capture

Hey there, change the string 'Button' to 'button'.

JavaScript is case sensitive, so if you capitalize the B, then document.createElement() doesn’t know what to do with it.

Hope this helps!
Ben

I see this error

Hey there, it looks like theres a small typo: an ‘e’ is missing in .createElement. Fixing that should solve the problem.

Hello,

Can someone please help with my code below? Not sure what I did wrong.

Hey there, it just looks like a few minor capitalization issues. The puzzle wants a variable named dogButton, while you have dogbutton.

Also, try changing textcontent to textContent.

Hope this helps!
Ben

Hello Ben,

It worked should have caught that! thank you so much!

Regards,

Leonard


I directly copied and pasted the sample code due to the exercise not accepting my code, but I’m still getting an error message about appendation order. How do I fix this?

Interesting, you definitely have the correct code!

The code for that feedback message works by using jQuery to get all of the HTML elements of the webview (the phone at the right of the screen where you see the output of your code), and then checking their order.

I have a few theories as to how this could break:

  1. A browser extension could be interfering with the elements being displayed. In this case, try disabling them.

  2. The browser itself might be causing the problem. We test Grasshopper on all browsers, but sometimes a browser update can break things. If this is the case, try completing the puzzle in a different browser.

  3. Display settings on your browser might be changing the elements. I don’t know a ton about browsers, but maybe zooming out could be changing the h1 to an h2? In this case, try making sure the zoom setting is at 100%.

Also try submitting a bug report by clicking the ... button at the top-right and selecting “Send Feedback”. The bug report will send us some basic information about your browser, for example: Chrome version 78 on Windows 10, that will help us recreate the problem on our end and fix it faster.

Hope this helps! Let me know if any of my recommendations fix the problem.
Ben

1 Like

Hey there!!
Which software are you using to run the program??

That is the Grasshopper web version at learn.grasshopper.app.

1 Like

How can i implement the same concepts in Java??
Is there something different code or what??

Resizing the window and browser extensions were not the issue. I was able to complete the puzzle on firefox with the same extensions as chrome. And thank you for your help. To avoid things like this in the future, is there any way to bypass puzzles and move onto the next one if I cannot complete the one in front of me?

Can i use these codes in my Bluej ?? If yes, than please give the necessary guidelines…
Thank you

If a bug in a puzzle is blocking completion, file a bug report, as that lets us know in case we weren’t already aware of the issue. We can then unlock the next step manually.

If you don’t want to wait for us to unlock the next step, you can add the URL parameter ?step=number to the URL bar. For example:

https://learn.grasshopper.app/project/intro-to-webpages?step=6

will take you to the 6th step in Intro to Webpages.

Hey there, Grasshopper teaches JavaScript, which is a different programming language than Java. You can read more about the difference here.

2 Likes