If User Clicks Button Again Javascript

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

Links take y'all to a certain part of the folio, another page of the website, or another website entirely. Buttons, on the other hand, are commonly manipulated by JavaScript events so they can trigger sure functionality.

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

Commencement, we'll look at the traditional onclick way that you lot exercise right from the HTML folio. So we'll see how the more modern "click" eventListner works, which lets yous split up the HTML from the JavaScript.

How to Use the onclick consequence in JavaScript

The onclick upshot executes a certain functionality when a button is clicked. This could be when a user submits a form, when you alter certain content on the web folio, and other things similar that.

You identify the JavaScript function you want to execute inside the opening tag of the push button.

Basic onclick syntax

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

For case

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

Notation that the onclick attribute is purely JavaScript. The value it takes, which is the function yous desire to execute, says it all, as it is invoked correct within the opening tag.

In JavaScript, you invoke a office past calling its name, and then you lot put a parenthesis after the function identifier (the name).

onclick consequence case

I take prepared some basic HTML with a little bit of styling so we can put the onclick event into existent-world practice.

                <div>   <p class="proper noun">freeCodeCamp</p>   <button>Modify to Blue</button> </div>                              

And here's the CSS to make information technology look good, along with all the rest of the example code:

                                  torso {    display: flex;    align-items: eye;    justify-content: center;    pinnacle: 100vh;       } p {    font-size: 2rem; }  button {     padding: 7px;     border: none;     border-radius: 4px;     cursor: pointer; }  button.bluish {     groundwork-color: #3498db; }  push button.green {     background-colour: #2ecc71; }  button.orangish {    background-color: orangered; }                              

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

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

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

                <div>   <p class="proper noun">freeCodeCamp</p>   <push onclick="changeColor()">Change to Blue</button> </div>                              

The office 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 lot need to link it in the HTML using the syntax below:

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

If you want to write the script in an HTML file, simply put it inside the script tag:

                <script>   // Your Scripts </script>                              

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

Offset of all, we need to select the element we want to manipulate, which is the freeCodeCamp text within the <p> tag.

In JavaScript, you do that with the DOM'south getElementById(), getElementsByClassName(), or the querySelector() methods. Then you shop the value in a variable.

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

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

Now that we have the text selected, allow's write our function. In JavaScript, the basic office syntax looks like this:

                office funcctionName () {     // What to do }                              

Then let's write our function:

                function changeColor() {     name.style.color = "bluish"; }                              

What'south going on?

Remember from the HTML that changeColor() is the part we are going to execute. That'southward why our function identifier (name) is set to changeColor. If the proper name doesn't correlate with what's in the HTML, information technology won't work.

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

So, inside our part, nosotros take the name variable we declared to go our freeCodeCamp text, then nosotros change the color to blueish.

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

Our code is working!

We could accept things a piffling bit further by changing our text to be more colors:

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

So, what nosotros want to practise is change the text to blue, green, and orange-reddish.

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 own too, which we will call "color".

Our web page inverse a picayune:

So, permit's select our freeCodeCamp text and write the function to change its color to blue, dark-green, and orange-carmine:

                const proper noun = certificate.querySelector(".proper noun");  office changeColor(colour) {    name.fashion.color = color; }                              

The block of code in the function takes the name variable (where we stored our freeCodeCamp text), and so set the colour to whatsoever we passed into the changeColor() functions in the HTML buttons.

How to Employ the click eventListener in JavaScript

In JavaScript, there are multiple ways of doing the same thing. As JavaScript itself evolved over time, nosotros started needing to split the HTML, CSS, and JavaScript code in guild to comply with best practices.

Event listeners make this possible as they allow you separate the JavaScript from the HTML. You tin also do this with onclick, but lets take some other approach here.

Bones eventListener syntax

                                  chemical element.addEventListener("blazon-of-event", functionToExecute)                              

Now, let's change the freeCodeCampt text to blue by using the click eventListner

This is our new HTML:

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

And this is what it looks like:

This time around in our script, we need to select the button too (non just the freeCodeCamp text). That's because there's nothing JavaScript in the opening tag of our button, which is cool.

And then, our script looks like this:

                const name = document.querySelector(".name"); const btn = document.querySelector("push");        btn.addEventListener("click", part () {         name.style.colour = "blue";  });                              

Nosotros can besides divide our part totally from the eventListener and our functionality volition nevertheless remain the same:

                btn.addEventListener("click", changeColor);       office changeColor() {         name.manner.color = "bluish"; }                              

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

One of the all-time ways to learn is past making projects, then let'due south take what we've learned near the onclick and "click" eventListner to exercise build something.

When you visit a blog, you oftentimes encounter excerpts of articles commencement. Then you tin click on a "read more" button to show the rest. Permit'due south endeavor to do that.

This is the HTML nosotros are dealing with:

                                  <article id="content">       <p>         freeCodeCamp is one of the best platforms to acquire how to code.         freeCodeCamp has a detailed curriculum that will take you lot from zero to         hero in web development, software engineering, auto learning, and         more.       </p>        <p>         freeCodeCamp also has a YouTube aqueduct containing over 1000 videos on         web development, software applied science, machine learning, data science,         freelance web development, database administration, and pretty much         annihilation related to tech. To get updates when videos are uploaded, you         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 larn how to lawmaking on freeCodeCamp,         freeCodeCamp runs on voluntary donations from donors all effectually the         world in order to pay employees and maintain servers. If yous are         generous plenty consider joining the donors.       </p>     </article>  <button onclick="showMore()">Show more</push>                              

Information technology'south elementary HTML with some facts near freeCodeCamp. And there's a button nosotros already attach an onclick to. The office nosotros desire to execute is showMore(), which we volition write soon.

Without a CSS, this is what we have:

It's non super ugly, but nosotros can make it look better and human action the mode we want it to. So nosotros take some CSS which I will explicate below:

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

What'due south the CSS doing?

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

We too have box sizing set to border-box then nosotros can include the padding and border in our elements' full width and height.

Nosotros centered everything in the body with Flexbox and gave it a light grey groundwork.

Our <article> element, which contains the text, has a width of 400px, a white background (#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 it accept a font-size of 18px, then we gave them a maximum height of 270px. Due to the max height of the article element, all the text won't be independent and will overflow. To fix this, nosotros fix overflow to hidden in order not to show that text at first.

The transition holding ensures that every modify happens afterward 1 second. All text inside the article are justified and have a margin top of 20 pixels then information technology doesn't stay too fastened to the top of the page.

Because we removed the default margin, our paragraphs got all pushed together. Then we set a bottom margin of 16 pixels in order to divide them from one another.

Our selector, article.open, has a property of max-top prepare to 1000px. This means that any time the article chemical element has a class of open up fastened to information technology, the maximum height will change from 270px to 1000px to testify the residue of the article. This is possible with JavaScript – our game changer.

We styled our button with a darkish background and made it white. We ready its edge to none to remove HTML'due south default border 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-course in CSS to change the button cursor to a pointer. The background color slightly changes when a user hovers their cursor over information technology.

In that location we become – that's the CSS.

Our page now looks amend:

The next matter nosotros demand to practise is to write our JavaScript then we can encounter the rest of the article that is hidden.

We take an onclick attribute inside our button opening tag ready to execute a showMore() function, so allow'southward write the function.

We need to select our article first, because we have to prove the rest of it:

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

The next thing we need to do is write the function showMore() so nosotros can toggle between seeing the rest of the article and hiding it.

                part showMore() {      if (commodity.className == "open") {        // read less        article.className = "";        push.innerHTML = "Prove more than";      } else {        //read more than        article.className = "open up";        push.innerHTML = "Testify less";      }   }                              

What is the role doing?

We employ an if…else argument here. This is a crucial part of JavaScript that helps y'all make decisions in your code if a certain condition is met.

The basic syntax looks similar this:

                if (condition == "something") {   // Exercise something } else {   // Do something else }                              

Here, if the class name of the commodity equals open (that is, we want to add together the grade of open up to information technology, which was set to a maximum height of 1000px in the CSS), so we desire to encounter the rest of the article. Else, we want the article to return to the initial state where a part of it is hidden.

We practise this by assigning it a form of open in the else block, which makes information technology show the rest of the article. Then nosotros ready the class to an empty string (none) in the if block, which makes information technology return to the initial state.

Our code is working fine with a smooth transition:

Nosotros can separate the HTML and JavaScript and notwithstanding use onclick, because onclick is JavaScript. So it's possible to write this in a JavaScript file instead of starting from the HTML.

                                  push.onclick = part () {      if (article.className == "open") {        // read less        article.className = "";        push button.innerHTML = "Evidence more";      } else {        //read more        commodity.className = "open";        button.innerHTML = "Show less";      }   };                              

We can besides do this using an eventListner:

                <article id="content">       <p>         freeCodeCamp is one of the best platforms to larn how to code.         freeCodeCamp has a detailed curriculum that will have you from zero to         hero in spider web development, software engineering science, motorcar learning, and         many more.       </p>        <p>         freeCodeCamp also has a YouTube channel containing over g videos on         spider web evolution, software engineering, machine learning, data scientific discipline,         freelance web development, database administration, and pretty more         anything related to tech. To get updates when videos are uploaded, you         need to subscribe to the channel and plough on notifications. You can also         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         globe in order to pay employees and maintain servers. If you are         generous enough consider joining the donors.       </p> </article>  <push id="read-more">Show more than</push button>                              

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

Our functionality remains the same!

Conclusion

I hope this tutorial helps you understand how the click event works in JavaScript. Nosotros explored two different methods hither, so at present you tin can start using them in your coding projects.

Thanks for reading, and proceed coding.

---

---

Learn to code for gratuitous. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs every bit developers. Get started

berryearre1974.blogspot.com

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

Share this post