It’s tedious that I have to copy-paste a function like loadInitialValue(), loadInitialValue2(), loadInitialValue3(), so on and so forth. This is my repetitive code (if you click “Mark as Read,” the title of the short story grays out; otherwise, it goes back to white again):
function readunread() { // Short Story 1
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 readunread2() { // Short Story 2
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 readunread3() { // Short Story 3
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 loadInitialValue() { // Short Story 1
const localValue = localStorage.getItem("readunread");
console.log(localValue);
if (localValue == "Mark as Unread") {
document.getElementById("readunread").value = "Mark as Unread";
} else {
document.getElementById("readunread").value = "Mark as Read";
}
}
function loadInitialValue2() { // Short Story 2
const localValue2 = localStorage.getItem("readunread2");
console.log(localValue2);
if (localValue2 == "Mark as Unread") {
document.getElementById("readunread2").value = "Mark as Unread";
} else {
document.getElementById("readunread2").value = "Mark as Read";
}
}
function loadInitialValue3() { // Short Story 3
const localValue3 = localStorage.getItem("readunread3");
console.log(localValue3);
if (localValue3 == "Mark as Unread") {
document.getElementById("readunread3").value = "Mark as Unread";
} else {
document.getElementById("readunread3").value = "Mark as Read";
}
}
function loadFontColor() {
const localValue = localStorage.getItem("read");
const localValue2 = localStorage.getItem("read2");
const localValue3 = localStorage.getItem("read3");
const fontColor = document.getElementsByClassName("read");
const fontColor2 = document.getElementsByClassName("read2");
const fontColor3 = document.getElementsByClassName("read3");
console.log(localValue);
console.log(localValue2);
console.log(localValue3);
if (localValue == "Gray") { // Short Story 1
document.getElementsByClassName("read").value = "Gray";
fontColor[0].style.color = "gray";
} else {
document.getElementsByClassName("read").value = "White";
fontColor[0].style.color = "";
}
if (localValue2 == "Gray") { // Short Story 2
document.getElementsByClassName("read2").value = "Gray";
fontColor2[0].style.color = "gray";
} else {
document.getElementsByClassName("read2").value = "White";
fontColor2[0].style.color = "";
}
if (localValue3 == "Gray") { // Short Story 3
document.getElementsByClassName("read3").value = "Gray";
fontColor3[0].style.color = "gray";
} else {
document.getElementsByClassName("read3").value = "White";
fontColor3[0].style.color = "";
}
}
body {
background:black;
}
.button {
border: none;
color: white;
font-family: Corbel;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
background-color: black;
}
input[type=button] {
font-size: 20px;
font-family: Corbel;
text-decoration: none;
color: white;
border: none;
background: none;
cursor: pointer;
margin: 0;
padding: 0;
.shortstories {
font-family: Corbel;
font-size: 25px;
}
<input type = "button" value = "Mark as Read" id = "readunread" onclick = "readunread();">
<input type = "button" value = "Mark as Read" id = "readunread2" onclick = "readunread2();">
<input type = "button" value = "Mark as Read" id = "readunread3" onclick = "readunread3();">
<script> loadInitialValue(); </script>
<script> loadInitialValue2(); </script>
<script> loadInitialValue3(); </script>
<div class = "shortstories">
<table cellspacing = "50" cellpadding = "5" border-collapse = "collapse", border = "0", style = "text-align: justify;">
<tr>
<td class = "read"><p><a href = "shortstory1.html"> Short Story 1 </a></p></td>
<td class = "read2"><p><a href = "shortstory2.html"> Short Story 2 </a></p></td>
<td class = "read3"><p><a href = "shortstory3.html"> Short Story 3 </a></p></td>
</tr>
</table>
</div>
<script> loadFontColor(); </script>
Do I have no choice but to replicate values over and over again? I think it’ll be hard if there are 100 short stories; I’ll write a function like “loadInitialValue100().” Is there a dynamic way to do this?
CodePudding user response：
Well, for example you could define a generic function once, and call it with different parameters:
function readunread(a) { // Short Story
const elemId = "readunread" a;
currentvalue = document.getElementById(elemId).value;
if (currentvalue == "Mark as Unread") {
document.getElementById(elemId).value = "Mark as Read";
document.getElementsByClassName("read" a).value = "White";
localStorage.setItem(elemId, "Mark as Read");
localStorage.setItem("read" a, "White");
} else {
document.getElementById(elemId).value = "Mark as Unread";
document.getElementsByClassName("read" a).value = "Gray";
localStorage.setItem(elemId, "Mark as Unread");
localStorage.setItem("read" a, "Gray");
}
}
// and instead of calling readunread3(), you call readunread(3)
Same logic applies to loadinitialvalues().
And if you need to call 100 of them, you'd do a for loop, such as
for(let i = 1;i<=100;i )
{
loadinitialvalues(i);
}
CodePudding user response：
You can do in this way also :
function readunread(id,cls,valToCheck,color,bool) {
currentvalue3 = document.getElementById(id).value;
if (bool && currentvalue3 == valToCheck) {
document.getElementById(id).value = valToCheck;
document.getElementsByClassName(cls).value = color;
localStorage.setItem(id, valToCheck);
localStorage.setItem(cls, color);
return;
}
document.getElementById("readunread3").value = valToCheck;
document.getElementsByClassName("read3").value = color;
localStorage.setItem("readunread3", valToCheck);
localStorage.setItem("read3", color);
}
//works for if
readunread("readunread3","read3","Mark as Unread","White",true);
//works for else
readunread("readunread3","read3","Mark as Unread","Grey",false);