Repeating the process of copying and pasting functions such as loadInitialValue(), loadInitialValue2(), loadInitialValue3(), is quite monotonous. This is the repetitive code snippet that I have been working on (when you click on "Mark as Read," the title of the short story fades to gray, otherwise it returns to white):
// Function for Short Story 1
function readunread() {
currentvalue = document.getElementById("readunread").value;
if (currentvalue == "Mark as Unread") {
document.getElementById("readunread").value = "Mark as Read";
document.getElementsByClassName("read").value = "White";
localStorage.setItem("readunread", "Mark as Read");
localStorage.setItem("read", "White");
} else {
document.getElementById("readunread").value = "Mark as Unread";
document.getElementsByClassName("read").value = "Gray";
localStorage.setItem("readunread", "Mark as Unread");
localStorage.setItem("read", "Gray");
}
}
// Function for Short Story 2
function readunread2() {
currentvalue2 = document.getElementById("readunread2").value;
if (currentvalue2 == "Mark as Unread") {
document.getElementById("readunread2").value = "Mark as Read";
document.getElementsByClassName("read2").value = "White";
localStorage.setItem("readunread2", "Mark as Read");
localStorage.setItem("read2", "White");
} else {
document.getElementById("readunread2").value = "Mark as Unread";
document.getElementsByClassName("read2").value = "Gray";
localStorage.setItem("readunread2", "Mark as Unread");
localStorage.setItem("read2", "Gray");
}
}
// Function for Short Story 3
function readunread3() {
currentvalue3 = document.getElementById("readunread3").value;
if (currentvalue3 == "Mark as Unread") {
document.getElementById("readunread3").value = "Mark as Read";
document.getElementsByClassName("read3").value = "White";
localStorage.setItem("readunread3", "Mark as Read");
localStorage.setItem("read3", "White");
} else {
document.getElementById("readunread3").value = "Mark as Unread";
document.getElementsByClassName("read3").value = "Gray";
localStorage.setItem("readunread3", "Mark as Unread");
localStorage.setItem("read3", "Gray");
}
}
// Function to load initial value for Short Story 1
function loadInitialValue() {
const localValue = localStorage.getItem("readunread");
if (localValue == "Mark as Unread") {
document.getElementById("readunread").value = "Mark as Unread";
} else {
document.getElementById("readunread").value = "Mark as Read";
}
}
// More similar functions for other stories follow...
Is there a more dynamic approach to avoid repeating code for each short story? It would be cumbersome to create functions like "loadInitialValue100()" for 100 short stories. Is there a better way to handle this?