如何避免复制粘贴JavaScript函数

Question

我必须复制粘贴一个函数，比如loadInitialValue()、loadInitialValue2()、loadInitialValue3()等等，这很乏味。这是我重复的代码(如果你点击"标记为已读"，短篇小说的标题会变灰；否则，它会再次变回白色)：

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>

我别无选择，只能一次又一次地复制价值观吗？我认为如果有100个短篇小说的话会很难；我将编写一个类似"loadInitialValue100()"的函数。有动态方法可以做到这一点吗？

Answer 1

例如，您可以定义一次通用函数，并使用不同的参数调用它：

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)

相同的逻辑适用于loadinitialvalues()。

如果你需要打100个电话，你可以做一个for循环，比如

for(let i = 1;i<=100;i++)
{
loadinitialvalues(i);
}

Answer 2

您也可以这样做：

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);