改变这个函数,这样我可以传递一个id到它- javascript

Change this a function so I can pass a id into it- javascript

本文关键字:一个 id javascript 到它 函数 我可以 改变      更新时间:2023-09-26

目前我正在创建一个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的东西也需要改变。由于

改变这个函数,这样我就可以传入一个id

就像你说的,"传入一个id "

onclick="oneFunction(event, this.id)"
function oneFunction(event, id){
  // one code
}

你甚至不需要id。只要传入this,你就得到了你的元素

您也可以通过addEventListener添加函数,如

<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
    })
}