我应该如何开始重构我的代码以使其更简洁:

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 下面的代码,如果其他字段也需要此功能,请更新array.

// 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>

Javascript相关问答推荐

在卡信息之间切换

在时间轴完整日历中显示日期标题

如何在JavaScript中通过一次单击即可举办多个活动

JavaScript文本区域阻止KeyDown/KeyUp事件本身上的Alt GR +键组合

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮?

Vega中的模运算符

Google图表时间轴—更改hAxis文本 colored颜色

如何在Angular中插入动态组件

Angular material 拖放堆叠的牌副,悬停时自动展开&

切换时排序对象数组,切换不起作用

使用Java脚本根据按下的按钮更改S文本

Regex结果包含额外的match/group,只带一个返回

如何使用子字符串在数组中搜索重复项

连接到游戏的玩家不会在浏览器在线游戏中呈现

在数组中查找重叠对象并仅返回那些重叠对象

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

如果没有页面重新加载Angular ,innerHTML属性绑定不会更新

Phaser3 preFX addGlow不支持zoom

构建器模式与参数对象输入

P5play SecurityError:无法从';窗口';读取命名属性';Add';:阻止具有源的帧访问跨源帧