Question

目前我正在创建一个Hangman游戏，我在网页上为每个按钮提供了26种不同的功能。单击按钮时，其功能有效。我想要做的是改变这一点，所以我需要的是所有26个按钮的一个功能。这是我的HTML：

           <a href="#" id="A" onclick="A(event)">A</a>
           <a href="#" id="B" onclick="B(event)">B</a>
           <a href="#" id="C" onclick="C(event)">C</a>
           <a href="#" id="D" onclick="D(event)">D</a>
           <a href="#" id="E" onclick="E(event)">E</a>
           <a href="#" id="F" onclick="F(event)">F</a>
           <a href="#" id="G" onclick="G(event)">G</a>
           <a href="#" id="H" onclick="H(event)">H</a>

           <a href="#" id="I" onclick="I(event)">I</a>
           <a href="#" id="J" onclick="J(event)">J</a>
           <a href="#" id="K" onclick="K(event)">K</a>
           <a href="#" id="L" onclick="L(event)">L</a>
           <a href="#" id="M" onclick="M(event)">M</a>

           <a href="#" id="N" onclick="N(event)">N</a>
           <a href="#" id="O" onclick="O(event)">O</a>
           <a href="#" id="P" onclick="P(event)">P</a>
           <a href="#" id="Q" onclick="Q(event)">Q</a>
           <a href="#" id="R" onclick="R(event)">R</a>
           <a href="#" id="S" onclick="S(event)">S</a>
           <a href="#" id="T" onclick="T(event)">T</a>
           <a href="#" id="U" onclick="U(event)">U</a>

           <a href="#" id="V" onclick="V(event)">V</a>
           <a href="#" id="W" onclick="W(event)">W</a>
           <a href="#" id="X" onclick="X(event)">X</a>
           <a href="#" id="Y" onclick="Y(event)">Y</a>
           <a href="#" id="Z" onclick="Z(event)">Z</a>

这是我的Javascript：

function A(event) {

   if (event.target.classList.contains("disabled")) {

     event.preventDefault();

   }

   document.getElementById("A").style.opacity = "0.5";

   event.target.classList.add("disabled");

   for (var letter = 0; letter <= randomWord.length - 1; letter++) {

     if (randomWord[letter] === "a") {

       document.getElementById("letter_" + letter).innerHTML = "A";

       if (oneClick === true) {

         score = score + 1;

         oneClick = false;

       }

       document.getElementById("Score").innerHTML = score;

     } else if (randomWord.indexOf("a") == -1 && hasLooped === true) {

       if (oneClick === true) {

         score = score + 1;

         oneClick = false;

       }

       document.getElementById("Score").innerHTML = score;

       hasLooped = false;

       mistakesLeft = mistakesLeft - 1;

       document.getElementById("attempsLeft").innerHTML = mistakesLeft;

       console.log(mistakesLeft);

       if (mistakesLeft == 7) {

         document.getElementById("part-1").style.display = "block";

       }

        else if (mistakesLeft == 6) {

         document.getElementById("part-2").style.display = "block";

       } else if (mistakesLeft == 5) {
         document.getElementById("part-3").style.display = "block";
       } else if (mistakesLeft == 4) {
         document.getElementById("part-4").style.display = "block";
       } else if (mistakesLeft == 3) {
         document.getElementById("part-5").style.display = "block";
       } else if (mistakesLeft == 2) {
         document.getElementById("part-6").style.display = "block";
       } else if (mistakesLeft == 1) {
         document.getElementById("part-7").style.display = "block";
       } else {
         document.getElementById("part-8").style.display = "block";
       }
     }
   }
 }

我需要对HTML和Javascript进行哪些更改，以便我不再需要26种不同的功能？在我的JavaScript中的东西也需要改变。感谢

Answer 1

更改此功能，以便我可以将ID传递给它

就像你说的那样，＆＃34;将一个id传递给它＆＃34;

onclick="oneFunction(event, this.id)"

function oneFunction(event, id){
  // one code
}

你甚至不需要id。只需通过this即可获得您的元素。

Answer 2

您还可以通过addEventListener附加功能

<强> HTML

<a href="#" id="A" class="gamebutton">A</a> <a href="#" id="B" class="gamebutton">B</a> <a href="#" id="C" class="gamebutton">C</a>

<强> JS

var allButtons = document.getElementsByClassName('gamebutton');
//-------------as given in a tag as class----------^^^^
for(var i=0; i<allButtons.length; i++;){
    allButtons[i].addEventListener('click', function (event){
        //the single function by which your game would be executed
        executeFunction(event, this.id);
        //the id(eg:- A, B, C)----^^^-- depends
        // on click is passing
    })
}

更改此功能，以便我可以将id传递给它-javascript

2 个答案: