How would I go about refactoring my code to be more concise:
const an1 = document.getElementById("an1");
const bt1 = document.getElementById("bt1");
bt1.addEventListener("click", () => {
if (an1.value.toLowerCase() === "test") {
document.getElementById("bt1").style.display = "none";
document.getElementById("an1").style.display = "none";
document.getElementById("wo1").style.display = "initial";
} else {
bt1.innerText = "Wrong!";
document.getElementById("bt1").style.background = "red";
}
});
const an2 = document.getElementById("an2");
const bt2 = document.getElementById("bt2");
bt2.addEventListener("click", () => {
if (an2.value.toLowerCase() === "test1") {
document.getElementById("bt2").style.display = "none";
document.getElementById("an2").style.display = "none";
document.getElementById("wo2").style.display = "initial";
} else {
bt2.innerText = "Wrong!";
document.getElementById("bt2").style.background = "red";
}
});<tr>
<td class="c1"><input id="an1" placeholder="test" type="text" onblur="this.value=removeSpaces(this.value);" /><a id="wo1" style="display: none;">test</a><button id="bt1">Submit</button></td>
<td class="c1">test</td>
</tr>
<tr>
<td class="c2"><input id="an2" placeholder="test1" type="text" onblur="this.value=removeSpaces(this.value);" /><a id="wo2" style="display: none;">test1</a><button id="bt2">Submit</button></td>
<td class="c2">test1</td>
</tr>Try below code, update the arrays if this fucntionality requires for others field too.
// change below arrays if you need this functionality for more fields
const expectedElementAnswer = [{ id: 'an1', expectAns: 'test' }, { id: 'an2', expectAns: 'test1' }];
const btnElementList = [
[{ id: 'bt1', displayValue: 'none' },{ id: 'an1', displayValue: 'none' }, { id: 'wo1', displayValue: 'initial' }],
[{ id: 'bt2', displayValue: 'none' }, { id: 'an2', displayValue: 'none' }, { id: 'wo2', displayValue: 'initial' }]
];
document.getElementById('myTable').addEventListener('click', (event) => {
const curElemetId = event.target.id;
const btnIndex = (curElemetId === 'bt1') ? 1 : (curElemetId === 'bt2') ? 2 : -1;
if ((btnIndex === 1) || (btnIndex === 2)) {
const idx = btnIndex - 1;
const { id, expectAns } = expectedElementAnswer[idx];
if (getElementValue(id).toLowerCase() === expectAns) {
changeDisplayStyles(idx);
} else {
setErrorWarning(curElemetId);
}
}
});
function changeDisplayStyles(idx) {
btnElementList[idx].forEach(({ id, displayValue }) => {
setDisplayStyle(id, displayValue)
});
}
function setDisplayStyle(displayId, value) {
document.getElementById(displayId).style.display = value;
}
function setErrorWarning(displayId, bgColor = 'red') {
const element = document.getElementById(displayId);
element.innerText = 'Wrong!';
element.style.background = bgColor;
}
function getElementValue(id) {
const value = document.getElementById(id)?.value || '';
return value;
}<table id="myTable">
<tr>
<td class="c1">
<input id="an1" placeholder="test" type="text"/>
<a id="wo1" style="display: none;">test</a>
<button id="bt1">Submit</button>
</td>
<td class="c1">test</td>
</tr>
<tr>
<td class="c2">
<input id="an2" placeholder="test1" type="text"/>
<a id="wo2" style="display: none;">test1</a>
<button id="bt2">Submit</button>
</td>
<td class="c2">test1</td>
</tr>
</table>