Создание и сохранение новых элементов tr с помощью JS ⇐ CSS

[Anonymous]

Я новичок в программировании, особенно в JS. Я создаю программу, предназначенную для расчета входных данных и помещения результата (вместе с датой) в таблицу. При каждом новом вводе в таблице должна появляться новая запись. Всякий раз, когда страница перезагружается, данные таблицы должны сохраняться и извлекаться.
Проблема, с которой я сейчас столкнулся, заключается в том, что сохраняется только первая запись. Все данные в таблице необходимо сохранить. Есть ли у кого-нибудь предложение? Спасибо.
Вот мой код:

Код: Выделить всё

// variables

const input = document.getElementById('input');

//buttons

const enter = document.getElementById('enter-value');
const log = document.getElementById("log-value");
const save = document.getElementById("save-value");
const done = document.getElementById("done-button");

//log areas

const itemHolder = document.getElementById('item-holder');
const totalMarker = document.getElementById("grand-total");

// messagges

const negativeValueMessage = document.getElementById('value-message-negative');
const positiveValueMessage = document.getElementById('value-message-positive');
const doneMessage = document.getElementById('done');

//other

const tool = document.getElementById('tool');
const date = new Date();

//input testing code

function checkInput (){
input.addEventListener('input', function(){
if(input.value < 0 ){
negativeValueMessage.style.display = "block";
positiveValueMessage.style.display = "none";
enter.style.display = "block";
enter.disabled = false;
enter.style.opacity = "100%";
}
else if (input.value > 0) {
negativeValueMessage.style.display = "none";
positiveValueMessage.style.display = "block";
enter.style.display = "block";
enter.disabled = false;
enter.style.opacity = "100%";
}
else {
negativeValueMessage.style.display = "none";
positiveValueMessage.style.display = "none";
enter.disabled = true;
if(enter.disabled){
enter.style.opacity = '60%';
}
}
});
}
checkInput();

// input reception

function useInput (){
enter.addEventListener('click', function(){
enter.style.display = 'none';
log.style.display = 'block';
inputDisalowed();
log.addEventListener('click', function(){
const addValues = Number(input.value) + Number(totalMarker.value);
const total = addValues;
totalMarker.value = total;
function newInfo(){
itemHolder.innerHTML += '' + dateHolder + '$' + totalMarker.value + '';
}
newInfo();
log.style.display = 'none';
save.style.display = 'block';
save.addEventListener('click', function(){
doneMessage.style.display = "grid";
tool.style.display = 'none';
const dateData = document.getElementById('date').innerText;
const amountData = document.getElementById('amount').innerText;
const dataArray = [dateData, amountData];
localStorage.setItem('savedDate', (dataArray[0]));
localStorage.setItem('savedAmount', dataArray[1]);
localStorage.setItem('savedTotal', Number(totalMarker.value));
done.addEventListener('click', function(){
reloadPage();
});
});
});
});
}
useInput();
retrieveOnReload();
const dateHolder = monthFixedValue() + '/' + date.getDate() + '/' + date.getFullYear();

function monthFixedValue (){
return date.getMonth() + 1;
}
function inputDisalowed (){
input.addEventListener('input', function(){
alert("You have already input your value.  Inputing again will always restart the proccess.");
location.reload();
});
}
function retrieveOnReload(){
window.addEventListener('DOMContentLoaded', function(){
const retrievedDate = localStorage.getItem('savedDate');
const retrieveAmount = localStorage.getItem('savedAmount');
itemHolder.innerHTML += '' + retrievedDate + '' + retrieveAmount + '';});
totalMarker.value = Number(localStorage.getItem('savedTotal'));
};
function reloadPage() {
window.location.href = window.location.href;
}

Код: Выделить всё

*{
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
::-webkit-scrollbar{
width:13px;
}
::-webkit-scrollbar-track{
background: rgb(160,180,190);
border-radius: 5px;
}
::-webkit-scrollbar-thumb{
background: rgb(120,140,150);
border-radius: 10px;
}
body {
background-image: url(/Background.svg);
display: grid;
width: 100vw;
justify-content: center;
margin: 0;
background-position: center;
align-content: center;
justify-items: center;
}
h1{
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(
rgb(150,170,180),
rgb(120,140,150)
);
border-radius: .5vw;
margin-bottom: 10px;
width: 80vw;
height: 70px;
min-width: 400px;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: rgb(20,20,90);
font-size: 40px;
border: none;
margin-top: -150px;
margin-left: -20px;
}
main{
display: grid;
align-items: center;
justify-items: center;
background: linear-gradient(
rgb(150,170,180) 20%,
rgb(120,140,150)
);
border-radius: .5vw;
margin-top: 10px;
padding: 20px;
width: 80vw;
min-width: 400px;;
}
.inputs {
margin: 20px;
width: 90%;
display: flex;
justify-content: center;
}
input {
border: none;
background-color: rgb(30,90,130);
color: rgb(10,10,50);
height: 35px;
width: 220px;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 15px;
border-bottom: 2px solid rgb(20,80,100);
border-radius: .2vw;
margin-right: 3px;
&::placeholder{
color: rgb(100,140,180);
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 15px;
font-weight: 900;
}
}
#enter-value, #save-value, #log-value{
border: none;
border-radius: .2vw;
background: rgb(20,80,180);
font-size: 20px;
font-weight: bolder;
color: rgb(10,10,50);
margin-left: 3px;
&:hover{
background: rgb(10,70,170);
}
&:active{
background: rgb(20,80,180);
}
}
#enter-value{
display: none;
}
#save-value{
display: none;
}
#log-value{
display: none;
}
.value-message{
color: rgb(30,40,100);
display: none;
margin-bottom: -20px;
}
label{
text-align: center;
font-weight: bolder;
display: flex;
align-items: baseline;
font-size: 35px;

}
#grand-total{
height: 40px;
width: 150px;
margin-bottom: 30px;
margin-top: 0px;
background: rgb(10,10,100);
color: rgb(150,170,180);
display: grid;
align-content: center;
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
border-radius: 2px;
font-weight: bolder;
font-size: 35px;
}
.table-window{
height: 100px;
width: 100%;
display: grid;
justify-items: center;
align-items: center;
overflow-y: scroll;
}
table{
background-color: rgb(60,120,160);
border-style: none;
border-collapse: collapse;
}
.heading-row{
background:  rgb(100,160,200);
height: 40px;
width: 750px;
}
th{
border: 0;
width: 170px;
}
td{
text-align: center;
padding: 4px;
width: 170px;
}
.th1,
.th2,
.th3{
border-right: 2px solid rgb(170,170,255);
}
.td1,
.td2,
.td3{
border-right: 2px solid rgb(170,170,255);
}
#done{
position: absolute;
display: grid;
justify-items: center;
display: none;
}
#done-img-holder{
display: flex;
justify-content: center;
align-content: center;
width: 100%;
height: 100%;
}
#done-img-holder > img{
width: 490px;
display: grid;
margin-top: -30px;
}
#done-info-holder{
display: grid;
justify-items: center;
width: 400px;
height: 170px;
background: linear-gradient(
rgb(180,180,190),
rgb(140,140,150)
);
align-content: center;
border-radius: .5vw;
}
#done-info-holder > p{
font-size: 20px;
color: rgb(10,70,160);
font-weight: 900;
}
#done-info-holder > button{
height: 50px;
width: 130px;
font-size: 30px;
font-weight: 900;
background: rgb(10,10,100);
border: none;
border-radius: 30px;
color: rgb(120,140,150);
&:hover{
background: rgb(120,140,150);
color: rgb(10,10,100);
}
&:active{
background: rgb(10,10,100);
color: rgb(120,140,150);
}
}

Код: Выделить всё

Finance_Tool



Simple Finance Tool
Your number is negative. This will be calculated as a financial loss.
Your number is positive. This will be calculated as a financial gain.


Enter
Log Change
Save Change

$



Date
Total After Change






[img]/Finance Tool/check-circle-svgrepo-com.svg[/img]

All done! You're entry is complete.
Done

Также здесь есть ссылка на код в codePen (примечание: из-за особенность codePen, код в нем не будет работать корректно, но вы можете скопировать его из codePen в свою IDE).
codePenProjectLink

Подробнее здесь: https://stackoverflow.com/questions/781 ... ts-with-js