Onclick which element

So, let's select our freeCodeCamp text and write the function to change its color to blue, green, and orange-red:. The block of code in the function takes the name variable where we stored our freeCodeCamp text , then set the color to whatever we passed into the changeColor functions in the HTML buttons.

In JavaScript, there are multiple ways of doing the same thing. You can also do this with onclick, but lets take another approach here. This time around in our script, we need to select the button too not just the freeCodeCamp text. We can also separate our function totally from the eventListener and our functionality will still remain the same:.

One of the best ways to learn is by making projects, so let's take what we've learned about the onclick and "click" eventListner to do build something. When you visit a blog, you often see excerpts of articles first. Then you can click on a "read more" button to show the rest.

Let's try to do that. And there's a button we already attach an onclick to. The function we want to execute is showMore , which we will write soon. Without a CSS, this is what we have:. It's not super ugly, but we can make it look better and act the way we want it to. So we have some CSS which I will explain below:. The paragraph tags inside of it have a font-size of 18px, and then we gave them a maximum height of px.

Due to the max height of the article element, all the text won't be contained and will overflow. To fix this, we set overflow to hidden in order not to show that text at first. The transition property ensures that every change happens after 1 second. Because we removed the default margin, our paragraphs got all pushed together. So we set a bottom margin of 16 pixels in order to separate them from one another.

Our selector, article. This means that any time the article element has a class of open attached to it, the maximum height will change from px to px to show the rest of the article. This is possible with JavaScript — our game changer. We styled our button with a darkish background and made it white. Finally, we used the hover pseudo-class in CSS to change the button cursor to a pointer.

The background color slightly changes when a user hovers their cursor over it. Angular Js JavaScript vs. Next Topic JavaScript dblclick event. Reinforcement Learning. R Programming. React Native. Python Design Patterns. Python Pillow. Python Turtle. Verbal Ability. Interview Questions. Company Questions. Artificial Intelligence.

Cloud Computing. Data Science. Angular 7. Machine Learning. Data Structures. The code above uses a function expression to store the handler function in a variable — const greeting. To invoke the handler, we use the name of the variable — and not that of the function — when defining the onclick event handler. The function could also have been anonymous when defined.

Learn more about JavaScript functions by following this link. In addition to defining the handler on an individual HTML element, you can also dynamically add a handler using JavaScript code.

There are two ways to accomplish this:. In both cases, the Button in the HTML document itself will not initially have an onclick event assigned to it when defined:.

In the HTML segment above, the button has no events assigned to it. It is a plain button with text. Both approaches to adding the event handler with JavaScript require us to grab a reference to the button and append an event to it. Below is an example of obtaining a reference to our button from the DOM:. There are various ways to get a reference to a DOM element. The code then prints the reference to the console, which is simply the HTML for defining the button:.

Now that we have a reference to the element, we can use the reference to assign an event handler.