button to dim the image collection

On the top right corner of my image gallery, there's a button that, when clicked, creates an overlay darkening the image. I'm trying to figure out how to toggle this effect on and off with a click. Any suggestions on how I can achieve this?

Here is the code snippet I am currently using:

Link to CodePen


btn.addEventListener("click", ()=> {
 var btnClass = btn.getAttribute("class");
  if(btnClass === "dark") {
    overlay.backgroundColor = "rgba(0,0,0,0.5)";
    btn.textContent = "Lighten";
    btn.setAttribute("class", "light"); 
  } else if (btn.className != "dark") {
    overlay.backgroundColor = "rgba(0,0,0,0)";
    btn.textContent = "Darken";
    btn.setAttribute("class", "dark"); 
  }
})

Answer №1

Try using overlay.style.backgroundColor instead of overlay.backgroundColor =

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

Apache causes HTML download tag to malfunction

I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...

Error: There was a syntax issue when trying to parse JSON due to an unexpected identifier "object" in the anonymous function

I'm having trouble understanding why there was an issue parsing this file: { "t": -9.30, "p": 728.11, "h": 87.10 } This is the javascript code I used: <script type="text/javascript"> function verify() { $.get("http://....file.json", funct ...

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

How can I showcase a different component within another *ngFor loop?

I am currently working on a table in HTML that displays product information. Here is the code snippet for it: <form [formGroup]="myform" (ngSubmit)="submit()" > <tbody> <tr class="group" *ngFor="let item of products;"&g ...

Error encountered when attempting to use Gridsome for Vue.js project construction

Currently, I am utilizing Vue.js and Gridsome to craft a personalized portfolio. However, an issue arose when I attempted to incorporate a JSON file to store my profile details on the site. Here is how I imported the file within my Index.vue component: &l ...

Access another key within an object

Here's a code snippet from my module: exports.yeah = { hallo: { shine: "was", yum: this.hallo.shine } } In the above code, I'm attempting to reference the shine property in yum: this.hallo.shine However, when I run the script, ...

What's with the lack of acknowledgment when I triumph in rock, paper, scissors, lizard, spock?

My game is running smoothly, except for when lizard or spock are involved and I win. For some reason, the outcome does not display correctly, even though it works fine when I lose. I've double-checked for typos but couldn't find any. If someone c ...

What advantages do interfaces as data types offer in Angular compared to using classes?

After watching a tutorial from my teacher, he showed us this code snippet: He mentioned that the products array, defined as type any [], is not taking advantage of TypeScript's strongly typing. He suggested using an INTERFACE instead. I have a questi ...

Adjustable height for the absolute element

Having a bit of an issue with the height of the absolute div. About: .wrapper - I want the wrapper to automatically adjust its height but be limited by a max-height. (No scrolling for the wrapper) .title - Just a title .content - The problem aris ...

Tips for initializing a jstree with no content?

When I click a button, I send a key to the controller and retrieve my lists using JSON. The array inside my lists serves as my children in my jstree. $("#btnSearch").on("click", function () { alert("I'm also here"); $.ajax({ ...

Guide on modifying CSS properties when hovering over the parent element

I am working with a table structure like this: <table> <tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Mom </td></tr> <tr><td class="momdad">< ...

What is the proper way to encode image URLs for use in CSS?

For the div element in my code, I want to allow users to input a URL that will be applied as a CSS background image, like this: background-image: url("/* user specified URL here*/") I'm concerned about security. How can I properly escape the URL to ...

Guide on showcasing jQuery variable values in PHP on a single page

I have some JavaScript and PHP code that I need help with. I want to assign a jQuery variable value to a PHP variable called $nicks, and then echo the value of $nicks on the same page. <script type="text/javascript"> var axel = 131.5678466; < ...

Can getServerSideProps be adjusted to avoid triggering a complete page reload after the first load?

My server-rendered next.js app consists of a 3-page checkout flow. The first page involves fetching setup data like label translations and basket items within the getServerSideProps function, as shown below: UserDetails.js import React from 'react&apo ...

What is the best way to retrieve all of a user's records based on a specified selection

My HTML text input field looks like this: <input id="CustID" name="CustID" dir="rtl" value="<?php echo $CustID;?>" size="35" required="true" maxlength="9" > Whenever a user enters their number, I want a select box to display all tickets assoc ...

authorization for certain express routes using passport.js

Securing certain express routes with Passport.js authentication Steps for authenticating specific routes in Passport.js Looking for a method to authenticate particular routes using Passport.js Your assistance is greatly appreciated... ...

Constructing a comprehensive inventory is a skill that requires strategy

Can someone advise on the best way to create a list structure with one parent category and two subcategories, each containing three items? Would it be ideal to use a combination of span and two uls, or perhaps a mix of span, anchor tags, and ul elements? ...

css: Positioning divs relative to their parent div

In my design, I want the blue div to be positioned next to the red div without affecting the yellow div's placement. http://jsfiddle.net/pCGxe/ Is there a cleaner way to achieve this layout without resorting to using position:absolute or other trick ...

Discover automatically generated titles for dynamic hyperlinks

I am looking to generate dynamic links for a collection of documents with varying names, such as Test, Test2, and so on. I want the link text to display as "Document TestN," where N is the specific document number. Currently, I am able to create the links ...

"Sliding through pictures with Bootstrap carousel placed beneath the

Currently, I am working on a website that requires a background image, although I personally do not prefer it. The client's preference is to have the navbar transparent so that the background image shows through it. Now, I would like to incorporate a ...