The settings of the button return to their default state once it is clicked on

I've been working on a small project and I added a button with hover and CSS effects.

However, the issue is that once the button is clicked, it reverts back to its basic state without any of the CSS properties applied.

I attempted to troubleshoot if JavaScript was causing this behavior, but unfortunately, I couldn't pinpoint the exact reason behind it.

Here's the HTML code for the button:

<button class="btn6">1 MB</button>

CSS Styles for the Button:

.btn6, .btn6:link, .btn6:visited {
  padding: 15px;
  border: 3px solid #333;
  color: #333;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 3px;
  transition: all .2s ease-in-out;
}
.btn6:hover, .btn6:link:hover, .btn6:visited:hover {
  background: #333;
  border: 3px solid #333;
  color: #fefefe;
  border-radius: 50px;
}

For those interested in reviewing the JavaScript code, you can access it via this CodePen link ( https://codepen.io/imgkl/pen/XwNyKZ )

The desired outcome is for the button to maintain its CSS properties even after being clicked.

javascripthtmlcss

Answer №1

The reason behind this issue is because all classes are being removed from the buttons when clicked, including btn6, which makes them appear unstyled after the click event.

To resolve this issue, modify the following section of the code:

btns.forEach (btn => {
  btn.className = '';
});

ev.target.className = 'choice';

to the following:

btns.forEach (btn => {
  btn.classList.remove('choice');
});

ev.target.classList.add('choice');

For those who want to refer back to the original codepen example, here is the link: Link to pen

Answer №2

Attempt an inline solution suitable for small projects

<button class="btn6" onclick="this.classList.add('visited')">1 MB</button>


.btn6, .btn6:link, .btn6:visited {
  padding: 15px;
  border: 3px solid #333;
  color: #333;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 3px;
  transition: all .2s ease-in-out;
}
.visited, .btn6:hover, .btn6:link:hover, .btn6:visited:hover {
  background: #333;
  border: 3px solid #333;
  color: #fefefe;
  border-radius: 50px;
}
<button class="btn6" onclick="this.classList.add('visited')">1 MB</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS - Triggering functions on image load event

I have been on a quest to find the best way to handle the onload event for images in Angular using jqLite. I came across this question, but I am looking for a solution that involves directives. Therefore, the approach below is not satisfactory to me: .c ...

javascriptangularjsangularjs-directiveonloadjqlite

What is the best way to distribute components with varying cell heights?

I am currently working on creating a user interface layout with components that need to be arranged in a specific order, as depicted in the accompanying image. My task involves developing a Material UI Dialog within a React application based on the design ...

cssreactjsflexboxmaterial-ui

What is the process for deploying a next.js application with a custom express backend to a VPS or Heroku platform?

Does anyone have advice on deploying a next.js application with a custom express backend to either a VPS or Heroku? ...

javascriptnode.jsexpressnext.jsvps

Translating coordinates into their corresponding location on the chart

I'm currently working with a dataset containing information about an area in Western Europe. I am trying to convert coordinates into values within this table, facing a challenge similar to the one described in this query. However, I lack experience in ...

javascriptmapscoordinateswgs84proj4js

What is an alternative method to retrieve POST fields in Express without relying on the bodyParser middleware?

Recent updates to Express have suggested to stop using the bodyParser middleware, as indicated by a debug message. Upon further research, it appears that bodyParser is simply a wrapper to the json and urlencoded middlewares. In its place, the latest versio ...

javascriptnode.jsexpressmiddleware

This issue with ng-include not functioning properly in Chrome but working fine in Firefox

My code is running only in Firefox and not working in Chrome. HTML Code <div ng-controller="myController1"> Select View: <select ng-model="employeeview"> <option value="1.html">1</option> < ...

javascripthtmlangularjs

The PHP file I'm trying to access isn't receiving the GET request from my PHP script

Basically, I want a button on one php page to trigger the printing of a new php page. This feature is working perfectly. The only issue is that I am trying to ensure the user ID gets passed over to the second page and displayed there. Strangely, it seems t ...

phphtmlget

Web Essentials is experiencing a problem with minified CSS

Today, while using Web Essentials 2013 for Update 3 with Visual Studio Express 2013 for Web, I encountered an issue with the minified CSS file. The website I am currently working on is built on a Twitter Bootstrap platform and utilizes two separate CSS fil ...

csstwitter-bootstrapweb-essentials

Increase the div id using jQuery

I've got this code snippet here and, oh boy, am I a newbie. How can I increase the number in the div using a jQuery script? if($res >= 1){ $i=1; while($row = mysqli_fetch_array($qry)){ echo "<div clas ...

javascriptjqueryhtmlcss

Issue with Yup and Formik not validating checkboxes as expected

I'm struggling to figure out why the validation isn't functioning as expected: export default function Check() { const label = { inputProps: { "aria-label": "termsOfService" } }; const formSchema = yup.object().shape({ ...

javascriptvalidationmaterial-uiformikyup

The Electron forge project from publisher-github is failing to detect the environment variable GITHUB-TOKEN

I've set up my .env file with the correct token, but I encountered an error when trying to publish my package on GitHub. An unhandled rejection has occurred inside Forge: Error: Please set GITHUB_TOKEN in your environment to access these features at n ...

javascriptgithubnpmelectron-forge

Tips for positioning a solitary md-tab component to the right

Can a single md-tab element be aligned to the right of md-tabs while keeping the rest of the tabs in their original position? ------------------------------------------------------------------------- | Tab 1 | Tab 2 | Tab 3 | ...

cssangularjstabsangular-material

What causes a div to shift to the right when the margin-left is set to auto?

I am curious to understand why setting the margin-left of the div with id="pink" to auto causes the div to move to the right side. Take a look at the image below: HTML <div id="aqua">aqua</div> <div id="yellow">yellow</div> & ...

csscss-position

Is it possible to utilize JSX independently of React for embedding HTML within a script?

Is it possible to incorporate inline HTML within a script using a library such as jsx? <script src="jsx-transform.js"></script> <script type="text/jsx"> define('component', function () { return (<div>test html code< ...

javascriptreactjs

Developing a Javascript widget feature

I have a concern regarding the functionality of Javascript widgets. The widget I'm working on embeds content onto a page without using iframes, which has been effective so far. However, there are instances where certain user layouts cause the widget t ...

javascriptwidget

Connecting JSON objects based on unique GUID values generated

I am in search of a method to automate the laborious task of linking multiple JSON objects with random GUIDs. The JSON files are all interconnected: { "name": "some.interesting.name", "description": "helpful desc ...

javascriptpythonjsonnpmawk

Challenges with arranging tables properly in React using Material UI

I am struggling to make this inner table span the full width and merge with all 8 columns. I have been unable to get the colspan attribute to work with material UI. The inner table is collapsible, which is working correctly, but the formatting of the table ...

htmlreactjsmaterial-ui

Adjusting the margin on an element causes a shift in the entire page's

Why is the margin of an h2 element on my page displacing the entire body downward? This seems abnormal since the h2 element is within a div container. Is there a way to address this issue? ...

htmlcss

Tips for concealing items on a website within a WebView

Is it possible to hide the header element with the search bar and logo when loading this page on a Webview? I'm not familiar with JavaScript, so is there a way to achieve this? The section I am looking to conceal ...

javascriptandroidhtmlandroid-webview

Soft keyboard on mobile fails to update when arrows are used in Ajax-populated dropdown menus

I am working on a web form that includes two select fields: Country and City: <select id="country" onchange="getCity(this);"> <option value="">-- Please select your country --</option> <option value="1">Austria& ...

javascriptjqueryajaxmobilesoft-keyboard