Help with small project so I can understand working with DOM?

Hello. I am in the middle of the “Building Interactive JavaScript Websites” class, and I’m constructing some small programs to help me understand exactly how HTML, CSS, and JS work together.

This is very basic. I just want to build something to help me understand:

I have gotten as far as getting it to display an image of a cat when entering something into the form and clicking the ‘submit’ button.
What I would like to do:
When you enter a number into the box, I want it to pass throughthe catAge function in my JS file and return the result on the screen. How do I do this?
Also, how do I then reset the form within the code?
Here is a link to my files on Github.

Thank you very much to anyone that can help. :pray:

Hi, if you check your github, I tried to make some changes to the javascript to display the age. It’s not perfect, but it’s a start.

I also might have messed up the pull request, it’s been a while since I did a github workflow.

Also, I changed the css and image file url’s in the HTML to make them display on my laptop, and only noticed after, so reject the HTML file changes to keep your original url’s.

Hope this helps, let me know how it goes, this was kinda fun :slight_smile:

get info from the input element as a string:

let inputString = document.getElementById('input-box').value;

You may to use parseInt or the Number constructor or something like that to get the number (integer) from that string.

An example of changing the text of an element (output the text to the page)

const placeholder = document.getElementById('placeholder');
placeholder.innerText = "this string becomes the text in the element";

I recommend putting much of this additional code inside the function that you’re using for the event listener, the revealInfo function.

(If you’re having trouble with the page releaoding when the button is clicked, you may need to put type="button" for the button element in the HTML.)

Edit: I reverted the links in the HTML file to their original state.

Hey thanks everyone! :star_struck:

This gives me enough to play with to try to get it functional. I’ll come back with an update.

I did it! I mean, there are always things that can be tweaked, but it has the basic functionality.
I used a bit of both of what you kind, helpful people recommended. Thanks again!

Cat Years Converter

1 Like

That looks great!!

It’s still not working when the user inputs “1” or “2”, but it works for “>=3” values. I think janbazant alluded to this, up above.

I suspect the problem is that the value that the user inputs is getting stored as a string. And then your catAge() function is trying to compare that string to a number, and it results in “undefined”. The solution, I think, will be to add a line that converts the string value to a number.

Something like:

let userInput = document.getElementById('input-box').value;
userInput = Number(userInput);  // converts the string to a number


You are correct! I totally forgot about this in my hasty excitement. I will fix it with the suggestions. Thanks again!

1 Like