单击按钮时更改变量答案

【问题标题】：Change a variable when button is clicked单击按钮时更改变量
【发布时间】：2016-09-18 12:48:06
【问题描述】：

尝试制作简单的井字游戏。我试图在单击时更改按钮的值，但我不知道用户将首先单击哪个按钮。显然，我有 9 个这样的按钮：

<input type="button" id="Button1" onclick="Button1_Click()" />

还有一个类似的函数来处理他们的点击事件。

<script>
    var Caption = "X";
    function Button1_Click() {
        document.getElementById('Button1').value = Caption;
        if (Caption=="X") {
            Caption = "O";
            Caption="X";
        }
    }
</script>

但问题是，当我单击其他按钮时，标题始终相同（X），我该如何更改它？

【问题讨论】：

您首先设置Caption，然后评估您已经分配的值。请发布更多代码，因为您可能会遇到更多错误。只是一个小提示，请使用以小写字母开头的变量。大写开始通常是一个班级的标志。
您始终设置 Caption = "X"（最后一行），您必须删除这一行 :) 还要在末尾移动“document.getElementById...”（在 if 语句之后）跨度>
如何附加 onclick 事件？
看来您需要先获取单击按钮的值，然后将其分配给变量。然后执行 if else，如果按钮值为 X 则将其设置为 0，否则如果按钮值为 0 则将其设置为 X...

标签： javascript c# html visual-studio

【解决方案1】：

试试这个，

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

<body>
    <div>
        <input type="button" id="Button1" class="btn" onclick="Button1_Click(this)" />
        <input type="button" id="Button2" class="btn" onclick="Button1_Click(this)" />
        <input type="button" id="Button3" class="btn" onclick="Button1_Click(this)" />
    </div>

    <div>
        <input type="button" id="Button4" class="btn" onclick="Button1_Click(this)" />
        <input type="button" id="Button5" class="btn" onclick="Button1_Click(this)" />
        <input type="button" id="Button6" class="btn" onclick="Button1_Click(this)" />
    </div>
    <div>
        <input type="button" id="Button7" class="btn" onclick="Button1_Click(this)" />
        <input type="button" id="Button8" class="btn" onclick="Button1_Click(this)" />
        <input type="button" id="Button9" class="btn" onclick="Button1_Click(this)" />
    </div>
    <script>
        var Caption = "X";
        function Button1_Click(btn) {

            $(btn).val(Caption);

            if (Caption == "X") {
                Caption = "O";
            } else {
                Caption = "X";
            }
        }
    </script>
</body>
</html>

【讨论】：

我没有得到console.log，对不起，我是新手！
控制台使您能够：记录诊断信息以帮助调试您的网页或应用程序

【解决方案2】：

方法一：关闭

一种方法是为单击处理程序使用闭包，这样它就知道按下了哪个按钮。在变量中跟踪轮到谁。

// Do this only when the page is loaded.
window.addEventListener('DOMContentLoaded', function() {

  // Variable to keep track of turns in.
  var Xturn = true;

  // A function that returns a specific click handler for a button.
  function createClickHandler(element, index) {
    
    // The anonymous function that is returned is the actual click handler.
    return function() {
      
      // Logs text in the console (press F12 to view it). Very useful for testing/debugging!
      console.log('Button ' + index + ' clicked');
      
      // Only do something if this button was still open.
      if (element.innerText == '') {
        element.innerText = Xturn ? 'X' : 'O';
        Xturn = !Xturn; // Toggle player
      };
      
    }
    
  }

  // Now for the actual initialisation:
  // Find all buttons.
  var buttons = document.querySelectorAll('button');

  // Attach a click handler to each of them.
  for (n = 0; n < buttons.length; n++) {
    buttons.item(n).addEventListener('click', createClickHandler(buttons.item(n), n));
  }

});

button {
  width: 50px;
  height: 50px;
  line-height: 50px;
  vertical-align: bottom;
}

<div>
  <button/><button/><button/>
</div>
<div>
  <button/><button/><button/>
</div>
<div>
  <button/><button/><button/>
</div>

方法二：事件目标

当一个事件被触发时，事件处理器获取一个事件对象作为参数。此对象包含有关事件的信息，例如触发它的元素。这样你也可以找到按钮。如果您给每个按钮一个 id 或其他可识别的属性，您可以区分按钮。

您可以在每个按钮上绑定一个事件处理程序，但将它绑定到父元素更容易。您甚至可以将点击处理程序绑定到文档。这样你也不必等待 DOM 被加载。偶数处理程序将捕获每次点击，它甚至会捕获对稍后动态添加的元素的点击。

在事件处理程序内部，你可以获取触发它的元素，并且只有当它是游戏的按钮之一时才会响应：

// Variable to keep track of turns in.
var Xturn = true;


document.addEventListener('click', function(event) {
  var event = event || window.event;
  var element = event.target || event.srcElement;

  // Only respond to button clicks
  if (element.tagName == 'BUTTON') {

    console.log('Button ' + element.id + ' clicked');
    
    // Only do something if this button was still open.
    if (element.innerText == '') {
      element.innerText = Xturn ? 'X' : 'O';
      Xturn = !Xturn; // Toggle player
    }
  }

});

button {
  width: 50px;
  height: 50px;
  line-height: 50px;
  vertical-align: bottom;
}

<div>
  <button id='b1' /><button id='b2' /><button id='b3' />
</div>
<div>
  <button id='b4' /><button id='b5' /><button id='b6' />
</div>
<div>
  <button id='b7' /><button id='b8' /><button id='b9' />
</div>

【讨论】：

【解决方案3】：

我认为您可以像下面这样更改您的 Button1_Click()：

function Button1_Click() {
    document.getElementById('Button1').value = Caption;
    if (Caption=="X") {
        Caption = "O";
    } else {
        Caption="X";
    }
}

但是，通过这种方式，您说您有 9 个按钮。然后，您必须创建 9 个分隔但看起来与上面的功能完全相同的功能。这个怎么样：

<!--You need to make it look better..-->
<div id='buttonParent'>
  <input type='button' id='btn1'>
  <input type='button' id='btn2'>
  <input type='button' id='btn3'>
  <input type='button' id='btn4'>
  <input type='button' id='btn5'>
  <input type='button' id='btn6'>
  <input type='button' id='btn7'>
  <input type='button' id='btn8'>
  <input type='button' id='btn9'>
</div>

<script>
// wrap all your 9 buttons in a tag <div id='buttonParent'> or whatever you like.
var buttonParentNode = document.getElementById('buttonParent');
var button_click = function(e) {
  // this function handle all button click event
  var btn = e.target; // DOM element which was click. It must be any tag inside buttonParentNode
  if (btn.tagName == 'INPUT') { // if DOM element is a input tag. 
    if (btn.innerHTML == 'X') {
      btn.innerHTML = 'O';
    } else {
      btn.innerHTML = 'X';
    }
  }
};

buttonParentNode.addEventListener('click', button_click, false);
</script>

【讨论】：

【解决方案4】：

function button_Click(e) {
  if(e.value === 'X') {
    e.value = 'O';
  } else {
    e.value = 'X';
  }
}

<input type="button" id="button1" onclick="button_Click(this)" value="X" />
<input type="button"  id="button2" onclick="button_Click(this)" value="O" />
<input type="button"  id="button3" onclick="button_Click(this)" value="X" />
<input type="button"  id="button4" onclick="button_Click(this)" value="O" />
<input type="button"  id="button5" onclick="button_Click(this)" value="X" />
<input type="button"  id="button6" onclick="button_Click(this)" value="O" />
<input type="button"  id="button7" onclick="button_Click(this)" value="X" />
<input type="button"  id="button8" onclick="button_Click(this)" value="O" />
<input type="button"  id="button9" onclick="button_Click(this)" value="X" />
<input type="button"  id="button10" onclick="button_Click(this)" value="O" />

但是更好的方法如下：

document.addEventListener("DOMContentLoaded", buttonClickHandler);

function buttonClickHandler() {
  var buttons = document.getElementsByClassName('button');
  
  for(var i = 0; i < buttons.length; i++) {
     buttons[i].addEventListener('click', function() {
       if(this.value === 'X') {
         this.value = 'O';
       } else {
         this.value = 'X';
       }
     });
  }
}

<input type="button" class="button" value="X" />
<input type="button" class="button" value="O" />
<input type="button" class="button" value="X" />
<input type="button" class="button" value="O" />
<input type="button" class="button" value="X" />
<input type="button" class="button" value="O" />
<input type="button" class="button" value="X" />
<input type="button" class="button" value="O" />
<input type="button" class="button" value="X" />
<input type="button" class="button" value="O" />

【讨论】：

这会起作用，但我想知道为什么你不使用 addEventListener 来处理 onload 事件（或者更好的是，DOMContentLoaded 事件）。此外，buttonClick 是一个用于初始化所有按钮的点击事件的函数的名称有点混乱。
@GolezTrol 我已经更新了我的答案，感谢您告知性能问题

【解决方案5】：

<input type="button" value='  ' onclick="Button_Click(this)" />
<input type="button" value='  ' onclick="Button_Click(this)" />
<input type="button" value='  ' onclick="Button_Click(this)" /> <br/>
<input type="button" value='  ' onclick="Button_Click(this)" />
<input type="button" value='  ' onclick="Button_Click(this)" />
<input type="button" value='  ' onclick="Button_Click(this)" /> <br/>
<input type="button" value='  ' onclick="Button_Click(this)" />
<input type="button" value='  ' onclick="Button_Click(this)" />
<input type="button" value='  ' onclick="Button_Click(this)" /> <br/>

<script>
var turn = 'x';
function Button_Click(btn) {
    if (btn.value == '  ') {
        btn.value = turn;
        turn = (turn == 'x') ? 'o' : 'x';
    }
}
</script>

你可以试试here

【讨论】：

我认为像这样从 DOM 绑定事件有点笨拙，但至少它有效。这与 Muhammad Usman 早些时候发布的答案几乎相同。