Issues involving adding elements to an array in CSS, JS, and HTML

I am currently working on a module where exam information is stored in an array and passed to another JavaScript file using localStorage. However, I'm facing an issue where the previous exam data keeps getting overwritten despite using .push method. All the variables have been defined elsewhere. Any help would be greatly appreciated. Below is the code snippet:

recentexamdb = []
document.getElementById("button1").onclick = function () {
    window.scrollTo(0, 0);
    document.getElementById("maindiv").style.visibility = "hidden";
    document.getElementById("buttondiv").style.visibility = "hidden";
    document.getElementById("countdown").style.visibility= "visible";
    var yearinput = document.getElementById("yearinput").value;
    var minuteinput = document.getElementById("minuteinput").value;
    var hourinput = document.getElementById("hourinput").value;
    var secondinput = document.getElementById("secondinput").value;
    // rest of the code goes here...
}

Answer №1

To ensure proper syntax in JavaScript, it is important to initialize the "recentexamdb" variable with the existing value from local storage. Failure to do so could result in the loss of previously saved values.

recentexamdb=JSON.parse(localStorage.getItem("storedexamdb")); // retrieve previously saved values
 recentexamdb.push(examinfoobject);
 localStorage.setItem("storedexamdb",JSON.stringify(recentexamdb));

When navigating to the next page, remember to follow these steps. I hope this information proves useful.

Answer №2

Thanks to aarati's advice, the problem was resolved by implementing a localstorage clickcounter and retrieving the saved values only when the clickcounter exceeded 1.

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

Struggling with incorporating elements into a dynamic CSS3 banner design?

Struggling to add up to 10 text items to the CSS3 animated banner. Having difficulty getting the items to display properly. I'm curious if there is a simpler way to achieve this with animations as shown in this example: http://jsfiddle.net/zp6B8/1/ & ...

JavaScript: Leveraging arrays as key values

Is there a way in javascript to create an Object with keys as numbers and values as arrays of objects? I am aiming to generate an object structured like this: {Key: "1", value: [Object, Object, ...], key: "2", value: [Object, Object, ...], key:"N", value ...

A beginner's guide to integrating ChartJS with React

Trying to incorporate ChartJS into a React component but unsure of how to proceed. First step is to create a canvas element following the instructions found at https://www.chartjs.org/docs/latest/getting-started/usage.html#creating-a-chart. Next, need to ...

Creating an interactive table with the power of FPDF and PHP

I have developed a unique Invoice System that allows users to customize the number of headings and fields using FPDF in conjunction with PHP. Subsequently, I can input the heading names and field values into HTML input fields. However, I am encountering a ...

What is the best way to navigate to a component that has been imported in Vue.js?

I have knowledge of Vue's scrollBehavior function, but I am struggling to integrate it with my existing code. On my Index page, I have sections composed of imported Vue components like this: <template> <div class="Container"> <Ab ...

Is it possible for the server to initiate communication with the client

Every time I try to find a solution, Comet always comes up. But it seems like overkill for what I need - just around 100 users at most, with maybe 10 online simultaneously. Is there a simpler and more suitable option for my needs, such as pushing data to ...

The margin of a single flexbox item is not aligned properly

The flexbox I have contains several items. All of them are displaying correctly except for the last one, which is expanding to the edge of the div. View the current appearance of the flexbox As shown in the image, the last element is extending to the con ...

What is the best way to run a callback once several Ajax requests have finished?

I am facing a challenge with executing a callback function after multiple jQuery Ajax requests have been completed. The issue arises when these Ajax requests call another function, resulting in the functions being undefined. I suspect that the root of ...

What is the best way to ensure that my drop-down menu items match the size of the parent nav bar?

I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element. Here is a link to a working example: HERE This is the snippet of HT ...

What is the best way to center my form vertically within the form container?

I am having trouble aligning my form vertically. I've experimented with different methods such as using display: table-cell and vertical-align: middle property, but nothing seems to work. I want to maintain the current structure of the page and would ...

Encountering an error when integrating my library with MUI

Currently, I am working on developing a library that wraps MUI. One of the components I created is a Button, and here is the code snippet for it: import React, { ReactNode } from 'react' import Button from '@mui/material/Button'; impor ...

Retrieving items from an array based on their class association

My challenge involves handling a list of items obtained using the following code: var searchResultItems = $(resultContainerId + ' li'); Each item in the search results can have different classes. How can I extract all items with a specific clas ...

The ts-loader seems to be malfunctioning (It appears that a suitable loader is required to handle this file type, as no loaders are currently set up to process it)

I'm currently in the process of integrating TypeScript into a JavaScript project, but it seems like webpack is not recognizing the ts-loader for files with the .tsx extension. I've attempted to use babel and even tried awesome-ts-loader, but none ...

Create a stunning MUI App bar with a blurred effect below a fixed Navbar

Is there a method to apply a blur effect to the background of my material-ui AppBar component, creating a visually appealing overlay below the fixed navbar? I have experimented with using filter: blur(0) but it does not achieve the desired result. I am lo ...

What is the best way to automatically increase the value of another column in SQL when the primary key is set to auto

In my database, I currently have a table storing customer details. I am looking to introduce a new column that will provide either existing or new customers with a unique auto-incremented ID for identification purposes. Additionally, I require a primary ke ...

Issue with Tabulator: The top and bottom calculations do not shift position when a column is toggled. Seeking a solution to toggle a column and refresh the table without losing the current

My main objective is to toggle the visibility of toggles while maintaining consistent formatting. However, I currently face an issue where using a filter achieves this but results in losing the current scroll position of the tabulator, which is not accepta ...

Select component with nested checkboxes for multilevel dropdown

I am interested in developing nested dropdowns with checkboxes, similar to the example shown in this image: Image 1 Is there a way to achieve this functionality using React? I have not been able to find any specific library that allows for this implement ...

Material UI fails to display any content

I attempted to integrate a navbar into my website, but React is not displaying anything. Even creating a new project did not resolve the issue. Additionally, Stack Overflow restricts posts that contain mostly code and I am unsure why. Here is my App.js im ...

Adding the count value to an array at the end of every loop iteration

Special thanks to mr_statler, we are getting closer to our goal. //@version=5 indicator("sma coun", overlay=false) myArray = array.new_float(0) var int counter = 0 for i = 200 to 201 if close > ta.sma(close, i) counter := counter +1 ar ...

Utilizing pop-up alerts and AJAX requests in jQuery forms

I am looking to enhance my website by creating a form using PHP and jQuery. Currently, the form is placed in the footer of my website. However, I want to display the form results in a popup within the main section of the website without requiring a page ...