Question

我想出了一串代码来根据观看者的点击显示教育性文字。最终，我也会附加图像。但是，作为一个新手，我相信可以用更加整洁的方式来完成。还考虑将有30种选择。我希望根据查看者选择的路线使用一个关键变量来打开和关闭，这样就减少了函数和attachevent事件。

重申我程序的目标是根据所单击的按钮显示各种文本。像路线A，路线B，然后是路线A1,2，路线B1,2，等等。

<html>

<body>

<div id="DivTextBox">Here is Intro of the story! <br><br><br><br><br><br><br> TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTe
xtTextTextTextTextTextText <br><br><br><br><br><br><br></div>

<div id="bint">
<button id="ButtonA">
Option A
</button>
<button id="ButtonB">
Option B
</button>
</div>
<button id="hideButtons">
 Hide Buttons
 </button>
 <button id="showButtons">
 Show Buttons
 </button>

 <script>

turncount = 0;
chA = document.getElementById("ButtonA");
chB = document.getElementById("ButtonB");
PrnKey = "Intro";
hideButtons.onclick = () => {
    bint.style.display = 'none';
}
showButtons.onclick = () => {
    bint.style.display = 'inline';

}
DivTextBox.onclick = () => {
bint.style.display = 'inline';
};


document.getElementById("ButtonA").onclick = function () {
    document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option A<br><br><br><br><br><br><br>";
    turncount ++;
    bint.style.display = 'none';
    ButtonA.innerText = `Option A turn ${turncount}`;
    ButtonB.innerText = `Option B turn ${turncount}`;
    chA.id = ("a1A");
    chB.id = ("a1B");
    attachEventHandlersRouteA();
    };
function attachEventHandlersRouteA() {

  document.getElementById("a1A").onclick = function () {
    document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option a1A<br><br><br><br><br><br><br>";

    turncount++;
      bint.style.display = 'none';
      a1A.innerText = `Option a1A turn ${turncount}`;
      a1B.innerText = `Option a1B turn ${turncount}`;
  };

  document.getElementById("a1B").onclick = function () {
    document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option a1B<br><br><br><br><br><br><br>";

    turncount++;
    bint.style.display = 'none';
    a1A.innerText = `Option bA turn ${turncount}`;
    a1B.innerText = `Option bB turn ${turncount}`;
    };

}



document.getElementById("ButtonB").onclick = function () {
    bint.style.display = 'none';
    document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option B<br><br><br><br><br><br><br>";
    turncount ++;
    ButtonA.innerText = `Option bA turn ${turncount}`;
    ButtonB.innerText = `Option bB turn ${turncount}`;
    chA.id = ("b1A");
    chB.id = ("b1B");
    attachEventHandlersRouteB ();
    };

function attachEventHandlersRouteB() {

  document.getElementById("b1A").onclick = function () {
    document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option b1A<br><br><br><br><br><br><br>";

    turncount++;
      bint.style.display = 'none';
      b1A.innerText = `Option b1A turn ${turncount}`;
      b1B.innerText = `Option b1B turn ${turncount}`;
  };

  document.getElementById("b1B").onclick = function () {
    document.getElementById("DivTextBox").innerHTML = "<br><br><br><br><br><br><br>Text explaining Option b1B<br><br><br><br><br><br><br>";
    turncount++;
    bint.style.display = 'none';
    b1A.innerText = `Option b1A turn ${turncount}`;
    b1B.innerText = `Option b1B turn ${turncount}`;
    };

}


 </script>
 </body>
 </html>

有没有办法在Javascript中通过点击切换文本来创建更大的代码块？

0 个答案: