Ways to eliminate the design from a previously selected list item

I'm working on creating a calendar that displays 3 booking times when a user clicks on a specific day. However, I am facing an issue where the styling (green color) remains on the selected day even if the user chooses a different day. Any assistance on how to resolve this would be much appreciated.

example

HTML:

<body onLoad="getMonth()">
<div id="container">
    <p id="month">MONTH</p>
    <div id="fullDiv">
        <ul class="days">
            <li>SUN</li>
            <li>MON</li>
            <li>TUE</li>
            <li>WED</li>
            <li>THUR</li>
            <li>FRI</li>
            <li>SAT</li>
            <li onclick="check(1);remStyle(event);">1</li>
            <li onclick="check(2);remStyle(event);">2</li>
            <li onclick="check(3);remStyle(event);">3</li>
            <li onclick="check(4);remStyle(event);">4</li>
            <li onclick="check(5);remStyle(event);">5</li>
            ...
        </ul>
    </div>

Javascript:

function check(value) {
  day = value;
  document.getElementById("bookingTimes").style.visibility = "visible";
  var content = document.getElementsByTagName("li");
  if (day == value) {
    content[day + 6].style.backgroundColor = "#1abc9c";
    content[day + 6].style.color = "#ecf0f1";
  }

  return day;
}

Answer №1

To highlight a selected element, you can apply a class and then remove it from all elements using a querySelectorAll function.

.selected
{
  background-color: #1abc9c;
  color: #ecf0f1;
}
function selectElement(value) {
  document.querySelectorAll(".selected").forEach(item => item.className = "");
  day = value;
  document.getElementById("bookingTimes").style.visibility = "visible";
  var elements = document.getElementsByTagName("li");
  if (day == value) {
    elements[day + 6].className = "selected";
  }
  return day;
}

Alternatively, you can track the selected element without using a class.

var selectedElement;
function selectElement(value) {
  if (typeof(selectedElement) != "undefined") {
    selectedElement.style.backgroundColor = "white";
    selectedElement.style.color = "black";
  }
  day = value;
  document.getElementById("bookingTimes").style.visibility = "visible";
  var elements = document.getElementsByTagName("li");
  if (day == value) {
    elements[day + 6].style.backgroundColor = "#1abc9c";
    elements[day + 6].style.color = "#ecf0f1";
    selectedElement = elements[day + 6];
  }
  return day;
}

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

"Enhance your data visualization with Highcharts Windbarb and effortless AJAX data

Alright. Let's rephrase a question that hasn't been answered yet. I've got a chart below with data loading dynamically via ajax. A simplified version (without ajax) of this graph works well as shown in this jsfiddle. The code below represe ...

Resolved the time zone problem that was affecting the retrieval of data from the AWS Redshift database in Next

Currently utilizing Next.js for fetching data from AWS Redshift. When running a query from DataGrip, the results display as follows: orderMonth | repeatC | newC 2024-02-01 | 81 | 122 2024-01-01 | 3189 | 4097 However, upon retrieving the same query ...

What is the reason behind the necessity of adding an extra slash when reloading the page and controller in AngularJS by using $location.path()?

In AngularJS, when you use $location.path() and pass the same URL as the current one, it does not reload the page and controller. However, if you add an extra slash at the end of the URL like this: $location.path('/currentURL/'); it forces a re ...

What is the best way to create subpages within a survey?

If I want to create a survey page on the web with multiple questions, but I am facing a challenge. I do not want to have several different pages and use a "Next Button" that links to another page. I am struggling to come up with ideas on how to implement ...

Set the value of a static file uploader using jQuery

I am having trouble retrieving the name of an existing file in a file uploader. I have a sample in jsfiddle demonstrating what I have tried. http://jsfiddle.net/shree/a4PKG/3/ However, when I click GetImage, the file uploader always remains empty. T ...

Developing a unique JavaScript object by extracting information from a jQuery AJAX response

Is there a recommended approach for creating a custom JavaScript object that contains data retrieved from a jQuery AJAX request? I'm considering two methods, but unsure which is the most appropriate. The first method involves including the AJAX reques ...

Namespace remains ambiguous following compilation

I'm currently developing a game engine in TypeScript, but I encountered an issue when compiling it to JavaScript. Surprisingly, the compilation process itself did not throw any errors. The problem arises in my main entry file (main.ts) with these ini ...

I am looking to create a button with a transparent border within a white background container

I am trying to achieve a button border effect similar to the one in the image provided. I want to create a div with a white background color, and inside that div, I need to add a button with a 15px margin or padding while making it transparent. <div cl ...

What is the best way to create a reset button for a timing device?

Is there a way to reset the timer when a button is clicked? Having a reset button would allow users to revisit the timer multiple times without it displaying the combined time from previous uses. Check out this code snippet for one of the timers along wit ...

The jQuery .load method is having trouble loading a local HTML file within a Cocoa WebView

Having an issue with my Cocoa WebView where I'm attempting to load a local HTML file using jQuery.load(). My code snippet looks like this: $("#mydiv").load("test.html"); // The test.html file is located within the app's bundle Although no exce ...

The function 'compilation.emitAsset' is not recognized by the sitemap-webpack-plugin

I'm currently working on setting up a sitemap for my live environment and I've encountered an issue while trying to utilize the sitemap-webpack-plugin. The error message I received is as follows: ERROR in TypeError: compilation.emitAsset is not a ...

Support for TrueType fonts in web browsersLet me know if you

If I have a custom font in TTF format and want to check if @font-face supports it, what script can I use? What are the available options? ...

Trouble arises with the MUI 5 date picker when inputFormat is included

When I select a date from the calendar, everything works fine. However, if I set inputFormat="yyyy/MM/dd" and manually type in the date, it doesn't recognize the date format properly. Instead, it treats the input as a string like 11111111111 ...

What is the secret to remaining on the same spot even after the page is reloaded?

How can I maintain the AJAX call data after a page reload? I have attempted to use code that reloads the entire page, but I would like to stay in the same location. Is there a way to achieve this without reloading the entire page? $('#updateAddressPr ...

Efficiently repositioning Kendo Mobile Buttongroup to a new row as needed

In my current project, there is a specific requirement to display three button groups in a row. If there are more than three buttons, they should move to the next row dynamically as the data will be fetched from the server. For reference, below is a sampl ...

Instructions on setting div opacity when Overflow is set to visibleExplanation on setting opacity for div with Overflow

In my HTML code, I have a div element and an image tag stacked one on top of the other. The div is smaller than the image. I have set the overflow property to visible for the div. My query is, when I add an image to the image tag, the content that overflow ...

Upon transitioning between router pages, an error message pops up saying "Vue Socket.io-Extended: this.$socket.$subscribe is not a

I have created a basic Vue application that is designed to connect to a NodeJS server using websockets. My setup involves the use of socket.io-extended for handling the connections. After following the documentation and implementing the websocket connect ...

Issue encountered while trying to download JSON file

I have been attempting to download JSON data into a JSON file using the code snippet below, but all it does is present me with a blank page in Internet Explorer. I am in search of a solution to download the JSON file without triggering any events on the ...

The Element Datepicker incorrectly displays "yesterday" as an active option instead of disabled when the timezone is set to +14

After adjusting my timezone to +14 using a chrome plugin, I noticed that the calendar app is displaying incorrect disabled dates. You can view the issue here. This is the formula I'm currently utilizing to disable dates: disabledDate(time) { re ...

"Using version 4.2.6 of NodeJS, create a constructor that takes a literal object as a

Currently, I am using NodeJS v4.2.6 which unfortunately has an issue with Block-Scoped declarations not being fully supported yet. Due to certain constraints, I am restricted to this version and have resorted to including the "use strict"; line to prevent ...