Я не программировал в javascript так долго и пришел из фона Java. Я пытаюсь использовать обработчики событий в своем коде, и у меня возникают проблемы. У меня есть таблица 3x3, так как я делаю игру с tic tac toe, и когда пользователь нажимает на одно из ящиков, я хочу изменить текст кнопки на X. Так что у меня есть html для моей таблицы, а кнопки - это данные таблицы и Я назначил все кнопки при нажатии на одну и ту же функцию. Когда нажимается кнопка, я отправил свой идентификатор моей функции, и оттуда я попытаюсь использовать этот параметр ID, чтобы установить текст, но это просто не происходит на данный момент, и я немного смущен, почему бы и нет. Я также сделал запрос (paramID), и paramID был прав, поэтому я не понимаю, что происходит. Любая помощь будет принята с благодарностью! Это, наверное, что-то глупое, что я сделал с моей стороны. Я пробовал firefox и chrome...
Вот мой код:
<table id="tictable" border="1"
<tr id="row1">
<td><button id="button1" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button2" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button3" type="button" onclick="actionPerformed(this.id)"</button></td>
</tr>
<tr >
<td><button id="button4" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button5" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button6" type="button" onclick="actionPerformed(this.id)"</button></td>
</tr>
<tr id="row3">
<td><button id="button7" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button8" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button9" type="button" onclick="actionPerformed(this.id)"</button></td>
</tr>
</table>
<script type="text/javascript">
function actionPerformed(paramID)
{
document.getElementById(paramID).value = "X";
}
</script>
Вам нужно использовать.innerHTML.
function actionPerformed(paramID)
{
document.getElementById(paramID).innerHTML = "X";
}
Демо здесь
Лучшим способом было бы удалить весь встроенный javascript и использовать его
window.onload = function () {
var all_buttons = document.querySelectorAll('button');
console.log(all_buttons);
for (i = 0; i < all_buttons.length; i++) {
all_buttons[i].addEventListener('click',function () {
this.innerHTML = 'X';
});
};
};
вы пренебрегли закрытием тегов <table>
и <button>
. при вызове функции просто передайте this
в parens и вытащите id из функции. затем обновите внутренности вашей кнопки до X., если вы хотите поменять место на X, вам придется получить доступ к parentNode, а затем обновить родительский innerHTML
<table id="tictable" border="1">
<tr id="row1">
<td><button id="button1" type="button" onclick="actionPerformed(this)"> </button></td>
<td><button id="button2" type="button" onclick="actionPerformed(this)"> </button></td>
<td><button id="button3" type="button" onclick="actionPerformed(this)"> </button></td>
</tr>
<tr >
<td><button id="button4" type="button" onclick="actionPerformed(this)"> </button></td>
<td><button id="button5" type="button" onclick="actionPerformed(this)"> </button></td>
<td><button id="button6" type="button" onclick="actionPerformed(this)"> </button></td>
</tr>
<tr id="row3">
<td><button id="button7" type="button" onclick="actionPerformed(this)"> </button></td>
<td><button id="button8" type="button" onclick="actionPerformed(this)"> </button></td>
<td><button id="button9" type="button" onclick="actionPerformed(this)"> </button></td>
</tr>
</table>
<script type="text/javascript">
function actionPerformed(domObj)
{
domObj.innerHTML = "X";
}
</script>
я просто скопировал это в jsfiddle, и это сработало
Что сказал Серджио, плюс для всех ваших кнопок:
<button id="button1" type="button" onclick="actionPerformed(this.id)"</button>
должно быть:
<button id="button1" type="button" onclick="actionPerformed(this.id)"></button>
См. Недостающие >
?