Change the property of an element once it is being clicked on

Change the property of an element once it is being clicked on
0

#1

How do I add class to html elements so that everytime user clicks on it, the border color of the element changes?
For example, in the example codepen I want to set those cards’ border to blue once user clicks on it.

How do I put .selected class to .card ?


#2

Do you want the border to stay changed?

If its just when its being clicked you can use the css selector .class:active

If it needs to stay that way you can use the javascript onclick function:


#3

First you get all elements you want to change.

var cards = Array.from(document.getElementsByClassName('card'))

Then you loop through each adding a “click” event that toggle it’s selected class.

cards.forEach(card => card.addEventListener('click', () => card.classList.toggle('selected')))

Don’t just copy paste, write it yourself and try to understand each section.


#4

thanks for the help, as you can see I am fairly new when it comes to learning to manipulate the dom, where should I start to learn these?

because right now I am basically googling blindly and just keep guessing what I should do to the element like : “maybe I should add a class to it? how do I select all these??”

Is there a list of most common dom manipulation command I should check out?

for example what I am doing is trying to clone this page: https://www.apple.com/shop/buy-mac/macbook-pro/13-inch-space-gray-2.3ghz-dual-core-128gb#

and right after making those cards selectable i should do 3 more things (at least the ones I can think of)

  1. make the 1st card default state as being selected
  2. make sure that when you select the bottom card, the upper one de-select itself
  3. add a number that can show the correct price of your purchase

and right now I have no idea where to start.
@ghukahr


#5

also between jquery and vanilla js which one should I learn 1st? (when it comes to manipulating DOM)


#6

I think it’s better if you study something structured first and then you try to clone or build something from scratch.

If you go through https://learn.freecodecamp.org/ by the time you finish the “Front End Libraries Certification” you’ll know exactly how to do it, be it in vanilla, jquery or even react. But you must start from the beginning, learning the DOM and javascript itself first.

After you’ve done that, you’re correct in the way you are programming now. Programmers always google how to do stuff and asks questions, there’s no way anyone can remember every function every time, so don’t feel bad for doing that. What’s missing for you is that “base knowledge”, you must know what to search or ask for.

Learn the DOM and javascript. Javascript can manipulate the DOM just fine nowadays, you don’t need jQuery for that.


#7

I’ve finished Responsive Web Design section of the curriculum.
All of the five projects.

portfolio: https://codepen.io/zhouxiang19910319/pen/bKJEPB
tribute page: https://mickeyrourke-tribute-page.netlify.com/
product landing page: https://vpn-product-landing-page.netlify.com/
technical documentation page: https://bootstrap-technical-documentation.netlify.com/
survey form: https://codepen.io/zhouxiang19910319/pen/xaBNNe

currently I am doing objective oriented programming section of JS algorithms and data structure cert.

maybe I can finish all the quests until jQuery then come back to this little project?

@ghukahr


#8

Sounds good! You’re almost there, you’ll learn to interact with the DOM in “Front End Libraries Certification”.


#9

thank you ! I actually did the jQuery part a year ago now I just forgot everything… :wink:
gonna relearn it later. also I gotta a felling that object oriented programming part is gonna take me a while to truly digest. I am planning to finish all these within this year. when I come back to this project, I will tag you if I have more question. thanks! :wink:


#10

@zhouxiang19910319
Hi there. In terms of learning and becoming more comfortable with JS (and jQuery) I would always recommend Traversy Media’s youtube channel as a resource outside of FCC. He has a number of smaller project videos to do with various parts of JS. Following some of his code along’s are a great way of getting use to different areas and seeing them in action. Additionally, you can revisit FCC or use MDN web docs on specific pieces that feel more challenging for you.

Happy coding!


#11

I think I knew which videos you are talking about. I did watch his videos about js. Some of them are teaching you how to manipulate the dom by building a form, while others teach you a little bit of javascript algorithms. I just did not follow through the whole thing. I will check those out later. Thanks for the suggestion!


#12

No problem! He has some crash course type videos with more length, but I personally prefer his mini projects, as you can take on small sized projects at your own pace, and focus on more specific stuff, as oppose to a whole general overview of JS (everyone has different learning methods though.) Always good to have several resources to learn from but. Hope the learning goes well!


#13

thank you for the wishes, this community had always been awesome. couldn’t do this without this awesome community.


#14

I agree completely! I love being on the forum. I find myself wanted to help out people that are having issues or getting stuck (even with my limited knowledge.) It forces me to learn more, and strengthen my knowledge on things I already know. Always open to help or offer support where I can!
(A little off topic)


#15

I would suggest checking out the JavaScript30 video series from Wes Bos.