更好、更短的 html、javascript

Question

我有 9 个按钮，我制作了 mouve hover 指针和 div 可点击，打开下一个 php 文件。 我让它们在按下后失去指针样式，并在按下其他按钮后检索它，一切正常。 但是有什么方法可以让这段代码更短更好？

这是单个按钮的代码

function Postac()
{
    document.getElementById("Okno_Gry").innerHTML='<object data = "Postac.php" width = "100%" height = "100%" ></object>';
    document.getElementById('PrzyciskPostac').removeAttribute("onclick"), 
    document.getElementById("PrzyciskPostac").style.cursor = "default";
        

    document.getElementById("PrzyciskWarsztat").setAttribute("onclick", "Warsztat()");
    document.getElementById("PrzyciskWarsztat").style.cursor = "pointer";

    document.getElementById("PrzyciskTargowisko").setAttribute("onclick", "Targowisko()");
    document.getElementById("PrzyciskTargowisko").style.cursor = "pointer";

    document.getElementById("PrzyciskArena").setAttribute("onclick", "Arena()");
    document.getElementById("PrzyciskArena").style.cursor = "pointer";

    document.getElementById("PrzyciskWyprawy").setAttribute("onclick", "Wyprawy()");
    document.getElementById("PrzyciskWyprawy").style.cursor = "pointer";

    document.getElementById("PrzyciskLochy").setAttribute("onclick", "Lochy()");
    document.getElementById("PrzyciskLochy").style.cursor = "pointer";

    document.getElementById("PrzyciskGildia").setAttribute("onclick", "Gildia()"), 
    document.getElementById("PrzyciskGildia").style.cursor = "pointer";

    document.getElementById("PrzyciskZamek").setAttribute("onclick", "Zamek()");
    document.getElementById("PrzyciskZamek").style.cursor = "pointer";

    document.getElementById("PrzyciskKopalnie").setAttribute("onclick", "Kopalnie()");
    document.getElementById("PrzyciskKopalnie").style.cursor = "pointer";

}

Answer 1

将所有点击处理程序名称放在一个数组中，然后循环它。

const click_handlers = ["Warsztat", "Targowisko", "Arena", ...];
click_handlers.forEach(name => {
    let el = document.getElementById(`Przycisk${name}`);
    el.setAttribute("onclick", `${name}()`);
    el.style.cursor = "pointer";
});

Answer 2

您可以包装重复的代码：

document.getElementById("PrzyciskWarsztat").setAttribute("onclick", "Warsztat()");
document.getElementById("PrzyciskWarsztat").style.cursor = "pointer";
  ...   
document.getElementById("PrzyciskTargowisko").setAttribute("onclick", "Targowisko()");
document.getElementById("PrzyciskTargowisko").style.cursor = "pointer";

进入 function 然后你可以调用它：

function clickable(id, method) {
  document.getElementById(id).setAttribute("onclick", method);
  document.getElementById(id).style.cursor = "pointer";
}

最后的代码变短：

function Postac() {
  document.getElementById("Okno_Gry").innerHTML =
    '<object data = "Postac.php" width = "100%" height = "100%" ></object>';
  document.getElementById("PrzyciskPostac").removeAttribute("onclick"),
    (document.getElementById("PrzyciskPostac").style.cursor = "default");

  clickable("PrzyciskWarsztat", "Warsztat()");
  clickable("PrzyciskTargowisko", "Targowisko()");
  clickable("PrzyciskArena", "Arena()");
  clickable("PrzyciskWyprawy", "Wyprawy()");
  clickable("PrzyciskLochy", "Lochy()");
  clickable("PrzyciskGildia", "Gildia()"),
  clickable("PrzyciskZamek", "Zamek()");
  clickable("PrzyciskKopalnie", "Kopalnie()");
}

Answer 3

从理论上讲，您可以使用循环来缩短它。

我还用调用 element.addEventListener(); 替换了您的 onlick 属性集；

const elementsAndCallbacks = [
   { id: "PrzyciskWarsztat", callback: Warsztat },
   { id: "PrzyciskTargowisko", callback: Targowisko },
   //etc
]

elementsAndCallbacks.forEach(item => {
   const el = document.getElementById(item.id);
   el.addEventListener('click', item.callback);
   el.style.cursor = "pointer";
});