Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Mark Shaw
10,449 PointsSimple JS question
I want to have the panel div expand when I click the "touch" image. I'm getting an error that reads ' undefined is not a function '
I know the answer must be simple but I can't seem to get it right. Any help would be greatly appreciated.
var touch = document.getElementsByClassName("arrow"); // this is the image
var panel = document.getElementsByClassName("side_bar");
function pop() {
panel.style = "width: 164px";
};
touch.addEventListener("click", pop);
What I would like is for users on touch devices to be able to click the arrow and see the menu.
http://teamtreehouse.com/workspaces/2299752
link to preview
Mark Shaw
10,449 PointsSorry I should have done that to begin with. Thanks!
wuworkshop
3,429 PointsOh, doesn't look like other users can view your workspace, but we should be able to view your preview page.
Mark Shaw
10,449 PointsBah! I 'm sorry. Is there a way I can allow others to view my workspace?
wuworkshop
3,429 PointsIn the Workspace window, there's an icon that looks like an eye in the top-right corner. If you click on it, it should open a new browser window showing your page. Just share that link here. I think that should work.
Mark Shaw
10,449 Pointsadded a link to the preview...see if that works. Thank you again for the help !
3 Answers
Chris Shaw
26,676 PointsHi Mark,
Based on your question and your code I believe you want the following as CSS properties are real properties on the style object in JavaScript.
panel.style.width = '164px';
Mark Shaw
10,449 PointsI appreciate the help! However, nothing has changed with that syntax correction.
Clicking the image still doesn't cause any event to happen.
Maybe if I try to clarify what I want to happen.
I have the .png image. I would like an event to happen when I click it ( ideally when it's tapped on a touch device.)
That event should expand the hidden div to 164px.
I understand that I'm probably not being very clear and I apologize. I've been at work all day and my brain is scattered.
I do appreciate the help though and I hope everyone has a happy new year!
Chris Shaw
26,676 PointsI missed the other issue, when using getElementsByClassName you need to select an element via an index because it's an array of elements whereas a method like getElementById is singular.
var touch = document.getElementsByClassName("arrow")[0];
var panel = document.getElementsByClassName("side_bar")[0];
wuworkshop
3,429 PointsYeah, I came to a similar conclusion as Chris Upjohn, with regards to your touch variable. I noticed I was getting a JS error in my browser that said the following:
touch.addEventListener is not a function
If you add an id to that image tag and then use getElementById instead of getElementsByClassName that removes the JS error I was getting. You could also try Chris' answer.
Mark Shaw
10,449 PointsThank you imaouto! I didn't see your answer before Chris' but thank you very much for taking the time to help me.
wuworkshop
3,429 PointsNo problem.
Mark Shaw
10,449 PointsChris! Perfect! Thank you so much!
Chris Shaw
26,676 PointsNo worries
wuworkshop
3,429 Pointswuworkshop
3,429 PointsCould you add your HTML and CSS as well? Or maybe put your code in JS Bin or a Treehouse Workspace?