Изменение текста кнопки в таблице

Question

Изменение текста кнопки в таблице

0

Я не программировал в 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>

Tastybrownies 04 окт. 2013, в 19:04

Источник

0

Вы не закрываете свой открывающий тег <button>. и у вас нет текста внутри тегов <button>. <кнопка> текст здесь </ button>
b_dubb 04 окт. 2013, в 17:06

Теги:

javascript

html

button

3 ответа

Ещё вопросы

Вы не закрываете свой открывающий тег <button>. и у вас нет текста внутри тегов <button>. <кнопка> текст здесь </ button>

Sergio · Answer 1 · 2013-10-04T15-37-00.000Z

Вам нужно использовать.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';
        });
    };
};

демонстрация

Я только что попробовал это, и это не изменило текст кнопки. Я не уверен, почему, хотя. Это выглядит правильно.
@Tastybrownies, это работает на демо, нажав на кнопку. Имейте в виду, что кнопка не имеет содержимого, поэтому они маленькие.
Спасибо. Я знал, что это было что-то маленькое. Мои толстые пальцы и HTML-теги не очень хорошая смесь. Еще раз спасибо Теперь это работает.
@Tastybrownies, рад, что смог помочь! Вы можете нажать, чтобы принять ответ. И, между прочим, проверьте мое второе демо, это лучше практиковать.
+1 для слушателей. ТБ должен принять этот ответ

b_dubb · Answer 2 · 2013-10-04T14-59-00.000Z

вы пренебрегли закрытием тегов <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)">&nbsp;</button></td>
<td><button id="button2" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button3" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
</tr> 
<tr >
<td><button id="button4" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button5" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button6" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
</tr>
<tr id="row3">
<td><button id="button7" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button8" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button9" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
</tr>
</table>

    <script type="text/javascript">

    function actionPerformed(domObj)
    {
        domObj.innerHTML = "X";
    }

    </script>

я просто скопировал это в jsfiddle, и это сработало

Когда вы передаете объект dom, нет необходимости получать его снова, используя getElementById.

Andy · Answer 3 · 2013-10-04T14-15-00.000Z

Что сказал Серджио, плюс для всех ваших кнопок:

<button id="button1" type="button" onclick="actionPerformed(this.id)"</button>

должно быть:

<button id="button1" type="button" onclick="actionPerformed(this.id)"></button>

См. Недостающие >?