单击按钮时更改变量

Question

Trying to make simple tic-tac-toe game. I'm trying to change the button's value when clicked, but I don't know which one the user will click first. Obviously, I've got 9 buttons like this:

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

and a function like this, to handle their onclick event.

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

But the thing is, when i click other buttons, The caption is always the same (X), how can I change it?

Answer 1

Method 1: Closure

One way to do it is using a closure for the click handler, so it knows which button was pressed. Keep track of who'se turn it is in a variable.

 // 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> 

Method 2: Event target

When an event is triggered, the event handler gets an event object as a parameter. This object contains information about the event, like the element that triggered it. This way you can also find the button. If you give every button an id or other recognizable property, you can distinguish between the buttons.

You can bind an event handler on every button, but it's even easier to bind it to a parent element. You can even bind the click handler to the document. That way you also don't have to wait for the DOM to be loaded. The even handler will capture every click, and it will even capture clicks on elements that are dynamically added later.

Inside the event handler, you can get the element that triggered it, and only respond if it is one of the buttons of the game:

 // 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> 

Answer 2

I think you may just change your Button1_Click() like below:

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

But, in this way, you said you have 9 buttons. Then you have to create 9 separated but look quite the same function like the one above. How about this:

<!--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>

Answer 3

 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" /> 

However a better approach would be as follows:

 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" /> 

Answer 4

try this,

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

Answer 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>

You may try it here