Изменение переменной при нажатии кнопки

Попытка сделать простую игру с тик-таком. Я пытаюсь изменить значение кнопки при нажатии, но я не знаю, какой из них пользователь нажмет первым. Очевидно, что у меня есть 9 таких кнопок:Изменение переменной при нажатии кнопки

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

и функция, подобная этой, для обработки события onclick.

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

Но дело в том, когда я нажимаю на другие кнопки, Надпись всегда одинакова (X), как я могу изменить его?

источник

2016-05-21 Miss.Alpha

Вы сначала устанавливаете 'Caption', а затем вы оцениваете значение, которое вы уже назначили. пожалуйста, напишите еще какой-нибудь код, потому что у вас может быть больше ошибок. просто небольшой намек, пожалуйста, используйте переменные со стартовыми маленькими буквами. Запуск шапок обычно является признаком класса. –

вы всегда устанавливаете Caption = «X» (последняя строка), вы должны удалить эту строку :) также переместить «document.getElementById ...» в конце (после оператора if) –

Как вы присоединяете событие onclick? – dfsq

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

источник

2016-05-21 08:30:30

Я не получаю console.log, извините, я новичок! –

Извините, плз комментировать эту строку, я забыл .. Консоль –

дает вам возможность: регистрировать диагностическую информацию, чтобы помочь отладить вашу веб-страницу или приложение. –

Метод 1: Закрытие

Один из способов сделать это с помощью закрытия для обработчика щелчка, так что он знает, какая была нажата кнопка. Следите за тем, кто превратил его в переменную.

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

Способ 2: Событие целевой

При наступлении события, обработчик события получает объект события в качестве параметра. Этот объект содержит информацию о событии, например, элемент, который его вызвал. Таким образом, вы также можете найти кнопку. Если вы дадите каждой кнопке идентификатор или другое узнаваемое свойство, вы можете различать кнопки.

Вы можете связать обработчик событий с каждой кнопкой, но еще проще привязать его к родительскому элементу. Вы даже можете привязать обработчик кликов к документу. Таким образом, вам также не нужно ждать загрузки 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>

источник

2016-05-21 08:33:15 GolezTrol

Я думаю, вы можете просто изменить 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>

источник

2016-05-21 08:39:24

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

источник

2016-05-21 08:42:02

Это будет работать, но мне интересно, почему вы не используете addEventListener для события onload (или лучше, событие DOMContentLoaded). Кроме того, 'buttonClick' является немного запутанным именем для функции, которая в основном инициализирует события щелчка всех кнопок. – GolezTrol

@GolezTrol Я обновил свой ответ, спасибо за сообщение о проблемах с производительностью. –

-2

<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

источник

2016-05-21 08:51:20

Я думаю, что привязывающие события от DOM, как это, немного неуклюжие, но по крайней мере это работает. Это в значительной степени то же самое, что и ответ, отправленный Мухаммадом Усманом раньше. – GolezTrol

Изменение переменной при нажатии кнопки

ответ

Смежные вопросы