0

私はそれほど長い間 JavaScript でプログラミングしておらず、Java のバックグラウンドを持っています。コードでイベント ハンドラーを使用しようとしていますが、問題が発生しています。私は三目並べゲームを作成しているので、3x3 のテーブルを持っています。ユーザーがボックスの 1 つをクリックすると、ボタンのテキストを X に変更したいので、テーブルの html があり、ボタンはテーブル データであり、クリックしたときにすべてのボタンに同じ機能を割り当てました。ボタンがクリックされると、その ID を関数に送信し、そこからこの 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>
4

3 に答える 3

2

.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';
        });
    };
};

デモ

于 2013-10-04T16:59:58.407 に答える
1

セルジオが言ったことに加えて、すべてのボタンについて：

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

次のようにする必要があります。

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

行方不明を参照してください>。

于 2013-10-04T17:04:45.853 に答える
1

<table>オープニングと<button>タグを閉じるのを怠った。関数呼び出しを行うときはthis、括弧を渡して関数で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にコピーしたところ、うまくいきました

于 2013-10-04T17:12:50.527 に答える