Chart Js Triger Again on Click

Whenever yous visit a website, you'll probably click on something like a link or push.

Links take you to a certain part of the page, another page of the website, or another website entirely. Buttons, on the other mitt, are usually manipulated by JavaScript events then they can trigger certain functionality.

In this tutorial, nosotros are going to explore the two different means of executing click events in JavaScript using two different methods.

First, we'll look at the traditional onclick fashion that you practise right from the HTML folio. And then we'll come across how the more modern "click" eventListner works, which lets you separate the HTML from the JavaScript.

How to Utilise the onclick event in JavaScript

The onclick effect executes a sure functionality when a button is clicked. This could be when a user submits a form, when you change certain content on the web page, and other things like that.

Y'all place the JavaScript function you lot want to execute inside the opening tag of the button.

Basic onclick syntax

                <element onclick="functionToExecute()">Click</chemical element>                              

For example

                <push button onclick="functionToExecute()">Click</push button>                              

Annotation that the onclick aspect is purely JavaScript. The value information technology takes, which is the office you want to execute, says it all, as it is invoked right within the opening tag.

In JavaScript, you lot invoke a function by calling its name, and so you put a parenthesis afterwards the office identifier (the name).

onclick event example

I have prepared some basic HTML with a trivial bit of styling so we can put the onclick upshot into real-world do.

                <div>   <p grade="name">freeCodeCamp</p>   <button>Change to Blue</button> </div>                              

And here's the CSS to arrive look good, forth with all the residual of the example code:

                                  trunk {    display: flex;    align-items: center;    justify-content: middle;    height: 100vh;       } p {    font-size: 2rem; }  button {     padding: 7px;     edge: none;     border-radius: 4px;     cursor: arrow; }  push.blue {     background-color: #3498db; }  button.dark-green {     background-color: #2ecc71; }  push button.orange {    background-color: orangered; }                              

So, on the web page, this is what we have:

Our aim is to change the color of the text to blueish when we click the push button. And then we demand to add an onclick attribute to our button, then write the JavaScript role to change the colour.

And then we need to make a slight change in our HTML:

                <div>   <p form="proper name">freeCodeCamp</p>   <button onclick="changeColor()">Change to Blue</button> </div>                              

The function we want to execute is changeColor(). So we need to write it in a JavaScript file, or in the HTML file inside a <script> tag.

If you want to write your script in a JavaScript file, you need to link it in the HTML using the syntax below:

                <script src="path-to-javascript-file"></script>                              

If you lot want to write the script in an HTML file, just put information technology inside the script tag:

                <script>   // Your Scripts </script>                              

Now, let's write our changeColor() role.

Kickoff of all, we demand to select the element we want to manipulate, which is the freeCodeCamp text inside the <p> tag.

In JavaScript, y'all exercise that with the DOM'due south getElementById(), getElementsByClassName(), or the querySelector() methods. And so you shop the value in a variable.

In this tutorial, I volition exist using querySelector() because information technology is more than modernistic and information technology's faster. I will likewise be using const to declare our variables instead of allow and var, because with const, things are safer as the variable becomes read-only.

                const proper name = document.querySelector(".proper name");                              

At present that we take the text selected, let's write our role. In JavaScript, the basic function syntax looks similar this:

                function funcctionName () {     // What to do }                              

So let'due south write our function:

                function changeColor() {     name.way.colour = "blue"; }                              

What's going on?

Recollect from the HTML that changeColor() is the function we are going to execute. That'due south why our function identifier (proper name) is ready to changeColor. If the proper name doesn't correlate with what's in the HTML, it won't piece of work.

In the DOM (Document Object Model, refers to all of the HTML), to change anything that relates to style, you lot need to write "fashion" then a dot (.). This is followed by what you want to change, which might be the colour, background color, font size, and and so on.

So, inside our function, we take the name variable nosotros declared to get our freeCodeCamp text, then we modify the color to blue.

The color of our the text turns blue any fourth dimension the button is clicked:

Our code is working!

We could take things a little fleck further by irresolute our text to be more colors:

                <div>       <p class="name">freeCodeCamp</p>       <button onclick="changeColor('blue')" grade="blue">Bluish</button>       <push button onclick="changeColor('greenish')" form="green">Green</button>       <push onclick="changeColor('orangered')" class="orange">Orange</push button> </div>                              

And then, what we want to do is change the text to blueish, greenish, and orange-red.

This time around, the onclick functions in our HTML take the values of the colour we want to change the text to. These are called parameters in JavaScript. The function we'll write takes its ain also, which we will phone call "color".

Our web page changed a little:

And then, allow's select our freeCodeCamp text and write the function to change its colour to blue, green, and orange-cherry-red:

                const name = document.querySelector(".proper name");  function changeColor(color) {    name.style.color = color; }                              

The block of code in the role takes the name variable (where we stored our freeCodeCamp text), then fix the color to any we passed into the changeColor() functions in the HTML buttons.

How to Use the click eventListener in JavaScript

In JavaScript, there are multiple ways of doing the aforementioned matter. As JavaScript itself evolved over fourth dimension, we started needing to separate the HTML, CSS, and JavaScript code in order to comply with all-time practices.

Result listeners make this possible as they let you split the JavaScript from the HTML. You can also do this with onclick, only lets take another approach here.

Basic eventListener syntax

                                  element.addEventListener("type-of-event", functionToExecute)                              

Now, allow'due south alter the freeCodeCampt text to blue past using the click eventListner

This is our new HTML:

                                  <div>       <p class="name">freeCodeCamp</p>       <push button>Change Color</push>  </div>                              

And this is what it looks like:

This fourth dimension around in our script, we need to select the button too (not just the freeCodeCamp text). That's because in that location's nothing JavaScript in the opening tag of our push button, which is cool.

So, our script looks like this:

                const proper name = document.querySelector(".proper noun"); const btn = certificate.querySelector("push");        btn.addEventListener("click", function () {         name.mode.color = "blue";  });                              

We tin can as well separate our role totally from the eventListener and our functionality volition still remain the aforementioned:

                btn.addEventListener("click", changeColor);       function changeColor() {         name.way.color = "blue"; }                              

How to Build a " Show More" and "Show Less" Button with JavaScrpit

Ane of the best ways to learn is past making projects, and then let's take what nosotros've learned about the onclick and "click" eventListner to practice build something.

When yous visit a blog, you ofttimes come across excerpts of manufactures kickoff. So yous tin click on a "read more" button to evidence the rest. Let's try to do that.

This is the HTML we are dealing with:

                                  <article id="content">       <p>         freeCodeCamp is ane of the best platforms to learn how to code.         freeCodeCamp has a detailed curriculum that will take yous from zero to         hero in spider web development, software engineering, machine learning, and         more.       </p>        <p>         freeCodeCamp also has a YouTube channel containing over 1000 videos on         web development, software technology, machine learning, data science,         freelance web development, database administration, and pretty much         anything related to tech. To get updates when videos are uploaded, yous         need to subscribe to the channel and plow on notifications. Y'all can also         follow freeCodeCamp on Twitter, where links to well written articles and         videos are tweeted daily.       </p>        <p>         Since no 1 has to pay to learn how to code on freeCodeCamp,         freeCodeCamp runs on voluntary donations from donors all around the         world in order to pay employees and maintain servers. If you are         generous enough consider joining the donors.       </p>     </article>  <button onclick="showMore()">Show more</push button>                              

Information technology's elementary HTML with some facts about freeCodeCamp. And there's a button we already attach an onclick to. The function nosotros want to execute is showMore(), which we will write soon.

Without a CSS, this is what nosotros take:

It's not super ugly, simply we can make it await better and human activity the way we want it to. And then we have some CSS which I volition explain below:

                <way>       * {         margin: 0;         padding: 0;         box-sizing: border-box;       }        body {         groundwork: #f1f1f1;         display: flex;         align-items: middle;         justify-content: center;         flex-direction: column;       }        commodity {         width: 400px;         background: #fff;         padding: 20px 20px 0;         font-size: 18px;         max-top: 270px;         overflow: subconscious;         transition: max-height 1s;         text-align: justify;         margin-top: 20px;       }        p {         margin-bottom: 16px;       }        article.open up {         max-height: 1000px;       }        push {         background: #0e0b22;         colour: #fff;         padding: 0.6rem;         margin-elevation: 20px;         edge: none;         border-radius: 4px;       }        button:hover {         cursor: pointer;         background: #1e1d25;       } </style>                              

What'south the CSS doing?

With the universal selector (*), we are removing the default margin and padding assigned to elements and then we tin can add our own margin and padding.

We also accept box sizing set to border-box so we can include the padding and border in our elements' total width and pinnacle.

We centered everything in the torso with Flexbox and gave it a light grey background.

Our <commodity> element, which contains the text, has a width of 400px, a white groundwork (#fff), and has a padding of 20px at the top, twenty on the left and right, and 0 at the bottom.

The paragraph tags inside of information technology have a font-size of 18px, and then we gave them a maximum acme of 270px. Due to the max height of the article element, all the text won't be contained and will overflow. To set this, we set overflow to subconscious in order non to show that text at first.

The transition holding ensures that every modify happens after 1 second. All text inside the article are justified and have a margin elevation of 20 pixels so it doesn't stay besides attached to the peak of the page.

Because we removed the default margin, our paragraphs got all pushed together. So we set up a bottom margin of 16 pixels in guild to carve up them from one another.

Our selector, commodity.open, has a holding of max-summit set to 1000px. This ways that any time the article chemical element has a class of open attached to information technology, the maximum height will change from 270px to 1000px to prove the rest of the article. This is possible with JavaScript – our game changer.

We styled our push with a darkish groundwork and fabricated it white. We set its edge to none to remove HTML'south default edge on buttons, and we gave it a border radius of 4px so information technology has a slightly rounded border.

Finally, we used the hover pseudo-class in CSS to alter the button cursor to a pointer. The groundwork colour slightly changes when a user hovers their cursor over it.

There we go – that's the CSS.

Our page now looks better:

The next affair nosotros need to do is to write our JavaScript and then we can see the rest of the commodity that is hidden.

We accept an onclick attribute inside our button opening tag fix to execute a showMore() part, and then let'due south write the function.

We need to select our article first, considering we take to show the residuum of information technology:

                const article = certificate.querySelector("#content");                              

The adjacent thing we need to practise is write the role showMore() so nosotros tin toggle between seeing the residual of the article and hiding it.

                function showMore() {      if (article.className == "open") {        // read less        article.className = "";        button.innerHTML = "Show more";      } else {        //read more than        article.className = "open";        button.innerHTML = "Testify less";      }   }                              

What is the part doing?

We utilize an if…else statement here. This is a crucial part of JavaScript that helps you lot make decisions in your lawmaking if a sure condition is met.

The basic syntax looks like this:

                if (condition == "something") {   // Practise something } else {   // Practise something else }                              

Here, if the class name of the article equals open (that is, nosotros desire to add the class of open to information technology, which was gear up to a maximum height of 1000px in the CSS), and then nosotros want to see the residual of the article. Else, we desire the article to return to the initial state where a part of it is hidden.

We do this by assigning it a class of open in the else block, which makes information technology testify the rest of the commodity. Then we set the class to an empty string (none) in the if block, which makes it return to the initial land.

Our code is working fine with a polish transition:

We tin can carve up the HTML and JavaScript and still utilize onclick, because onclick is JavaScript. And then information technology'south possible to write this in a JavaScript file instead of starting from the HTML.

                                  button.onclick = role () {      if (article.className == "open") {        // read less        commodity.className = "";        button.innerHTML = "Prove more";      } else {        //read more        article.className = "open";        button.innerHTML = "Testify less";      }   };                              

We can also practice this using an eventListner:

                <article id="content">       <p>         freeCodeCamp is i of the best platforms to learn how to code.         freeCodeCamp has a detailed curriculum that volition have you from zero to         hero in web development, software engineering, machine learning, and         many more.       </p>        <p>         freeCodeCamp besides has a YouTube channel containing over thousand videos on         web development, software engineering, auto learning, data science,         freelance spider web development, database administration, and pretty more than         anything related to tech. To get updates when videos are uploaded, you         need to subscribe to the channel and turn on notifications. You can besides         follow freeCodeCamp on Twitter, where links to well written articles and         videos are tweeted daily.       </p>        <p>         Since no one has to pay to larn how to code on freeCodeCamp,         freeCodeCamp runs on voluntary donations from donors all around the         world in lodge to pay employees and maintain servers. If you are         generous enough consider joining the donors.       </p> </article>  <button id="read-more than">Show more</button>                              

                                  const article = document.querySelector("#content");  const button = document.querySelector("#read-more");  push.addEventListener("click", readMore);  function readMore() {      if (article.className == "open") {        // Read less      article.className = "";      button.innerHTML = "Show more";    } else {      commodity.className = "open";      button.innerHTML = "Evidence less";    } }                              

Our functionality remains the same!

Conclusion

I hope this tutorial helps you understand how the click effect works in JavaScript. Nosotros explored ii dissimilar methods here, so now you tin start using them in your coding projects.

Thank you for reading, and go on coding.

---

---

Learn to code for free. freeCodeCamp'southward open up source curriculum has helped more than than 40,000 people become jobs equally developers. Get started

wisebusell.blogspot.com

Source: https://www.freecodecamp.org/news/html-button-onclick-javascript-click-event-tutorial/

Share this post