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
Tadjiev Codes
9,626 PointsJS dynamic table issue
Hi guys, I'm stuck here( Tried to google for a few days... First, Could someone help me out please to understand what's wrong with my code in the function displayStoreItems() on line 234.? I'm trying to create a dynamic table through JS but when I select the ALL from the dropdown list it shows three items that I have but it shows the same first item instead of all three items. However, When I just did, createElement('p') and appendChild(''); it works but I need to do it through the table. Am I looping through the table wrong? Secondly, through my OBject constructor when I'm instantiating or creating objects, I saved a path on line 68 however, the image doesn't show so to display it, I used document.createElement('img') and then appendChild. But how to make it work directly through the link that's in the object. I'm trying to access the image on line 282
tempStoreItem.Image
Third of all, I have a dropdown list through select for currencies. IS it possible to attach the flags to the dropdown list and what's the best way of doing it? The link to my snapshot workspace: https://w.trhou.se/ionmcw2cc4 By the way, All that I'm asking is located on store.html and project.js and nothing from my questions related to index.html) Would really appreciate a solution and explanation on the first 2 questions at least🙏🙏🙏
5 Answers
Steven Parker
231,271 PointsThe value of "tempStoreItem" is established on line 248, before the loop on 265 begins, so it does not change value within the inner loop. You could re-assign it inside the inner loop as a quick fix, but rethinking the logic and combining the loops at 245 and 265 might provide a better and more compact solution.
I'm not sure what you're intending to do when you say "work directly through the link" to create an image. The path is just a string, not an image, so creating an IMG element and adding the path to the "src" property is the correct way to display the image.
And the flags can be changed by just resetting the "src" attribute of the image:
document.querySelector("img.currencyFlag").src = "usflag.jpg";
But note that the tests for the current selection should be using "currencySelector.value" instead of just "currencySelector".
Tadjiev Codes
9,626 PointsThanks a lot Dear MR. Steven 🙏🙏🙏) As usually, you gave me a clue and solutions regarding all the issues😊
Tadjiev Codes
9,626 PointsGood day, Dear Mr.Steven,
It displays all the items but when I try to move to other selections of the dropdown list like complications , classic .There's sth wrong as it either it doesn't show the items by category as it used to or shows all the items like in the Classic selection. Is that because of the looping through the whole array or what's wrong with thee code? Steven Parker This is the updated workspace: https://w.trhou.se/rffi0dwkxj
Thank you🙏
Steven Parker
231,271 PointsYou really should rethink how the loop at (now) 276 can be combined with all the separate loops inside the "else if" chain, and how the filtering is being done. You can fix the issues and simplify the code a good deal at the same time.
Tadjiev Codes
9,626 PointsCould you please help me with how to combine them? I know that I'm asking too much. It's just that I have a deadline and I still have to write more functions for the shopping cart but this issue is not letting me focus on other parts. Thanks a lot🙏 @Steven Parker
Tadjiev Codes
9,626 PointsPlus, When I add more Items through the Object Constructor. ALL the items are displayed in one row. What If I want it to display only three or 4 items in one row and go down to the next line of a row? Would it be forced by javascript code or bootstrap in HTML would help me? Steven Parker
Steven Parker
231,271 PointsThe items are constrained to a row because they are laid out in a single row of a table. You can have the program generate multiple rows instead. You might also consider using a different layout that would be more flexible than a table (like flexbox or grid).
Tadjiev Codes
9,626 PointsThanks) generate multiple rows by creating tr for each data? Plus the flexbox or grid could be done through js code or would be smarter to do it through CSS?
Steven Parker
231,271 PointsYou might limit how many items you put on a row, and start a fresh row if you have more.
And the other layouts could be done in JS, or strictly CSS, or a combination, it's your choice.