Question

我希望根据onclick Javascript函数更改所有HTML输入元素，并防止它们在单击事件后再次更改。我的问题是，如果只点击其中一个输入元素，则所有输入元素都会改变。这是我的HTML代码：

<input type="button" id="button1" onclick="playerMove('button1')"/><input type="button" id="button2" onclick="playerMove('button2')"/><input type="button" id="button3" onclick="playerMove('button3')"/>
<input type="button" id="button4" onclick="playerMove('button4')"/><input type="button" id="button5" onclick="playerMove('button5')"/><input type="button" id="button6" onclick="playerMove('button6')"/>
<input type="button" id="button7" onclick="playerMove('button7')"/><input type="button" id="button8" onclick="playerMove('button8')"/><input type="button" id="button9" onclick="playerMove('button9')"/>

这是我的Javascript函数：

function playerMove() {

    document.getElementById("button1").value = "X";
    document.getElementById("button1").disabled = "disabled";
    document.getElementById("button2").value = "X";
    document.getElementById("button2").disabled = "disabled";
    document.getElementById("button3").value = "X";
    document.getElementById("button3").disabled = "disabled";
    document.getElementById("button4").value = "X";
    document.getElementById("button4").disabled = "disabled";
    document.getElementById("button5").value = "X";
    document.getElementById("button5").disabled = "disabled";
    document.getElementById("button6").value = "X";
    document.getElementById("button6").disabled = "disabled";
    document.getElementById("button7").value = "X";
    document.getElementById("button7").disabled = "disabled";
    document.getElementById("button8").value = "X";
    document.getElementById("button8").disabled = "disabled";
    document.getElementById("button9").value = "X";
    document.getElementById("button9").disabled = "disabled";

  }

Answer 1

尝试使用附加到onclick的单个window处理程序;如果event.target click为INPUT元素并且event.target未被停用，请将event.target value设置为"x"，{{1 } {}属性到disabled

true

window.onclick = function(e) {
  if (e.target.nodeName === "INPUT" 
      && /^button\d+$/.test(e.target.id)
      && !e.target.disabled) {
    e.target.disabled = true;
    e.target.value = "x"
  }
}

Answer 2

像这样更改您的js功能

   function playerMove(button) {
        document.getElementById(button).value = "X";
        document.getElementById(button).disabled = "disabled"; 
    }

Answer 3

您只需使用jQuery即可完成此操作：

$("input[type=button]").click(function() {
    $(this).attr("disabled", "disabled");
    $(this).val("X");
});

这会为每个onclick动态添加<input type="button" />事件监听器，以自动启用disabled属性。没有功能，也不需要onclick属性。

如果您不想使用/不知道如何使用jQuery，那么这里是上述代码的简单JS表示：

var buttons = document.querySelectorAll("input[type=button]");
for(var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        this.disabled = "disabled";
        this.value = "X";
    });
}

Answer 4

考虑将事件处理程序完全附加到 JavaScript

中

＆＃13;

window.addEventListener('load', function () { // after page loaded (i.e. elements exist)
    Array.prototype.forEach.call(             // for each
        document.querySelectorAll('.my_awesome_buttons'), // of the awesome buttons
        function (button) {                   // call it "button" and do the following
            button.addEventListener(          // when it gets
                'click',                      // clicked
                function (e) {                // do your thing to it
                    this.value = "X";
                    this.disabled = "disabled";
                }
            );
        }
    );
});

＆＃13;

<input type="button" id="button1" class="my_awesome_buttons"/><input type="button" id="button2" class="my_awesome_buttons"/><input type="button" id="button3" class="my_awesome_buttons"/>
<input type="button" id="button4" class="my_awesome_buttons"/><input type="button" id="button5" class="my_awesome_buttons"/><input type="button" id="button6" class="my_awesome_buttons"/>
<input type="button" id="button7" class="my_awesome_buttons"/><input type="button" id="button8" class="my_awesome_buttons"/><input type="button" id="button9" class="my_awesome_buttons"/>

＆＃13;

HTML输入元素和Javascript onclick函数

4 个答案: