CODEWITHSUNDEEP
javascripthtmldom
dj0965
dj0965

Reputation: 135

I'm trying to make a simple tic tac toe game with html and javascript

I am trying to make a simple tic tac toe game with html and javascript, where a button is clicked, and the value of that button becomes "x", but when I click it, nothing happens.

<!doctype html>
<html>
<head>
<style>
</style>
<script>
function tic(a) {
document.getElementById(a).value = "x";
}
</script>
</head>
<body>
<center>
Tic-Tac-Toe
</center>
<center>
<table>
    <tr>
        <td>
            <input value=" " name="aa" type="button" onClick="tic("aa")">
        </td>
        <td>
            <input value=" " name="ab" type="button" onClick="tic("ab")">
        </td>
    <tr>
</table>
</center>
</body>
</html>

Upvotes: 0

Views: 974

Answers (4)

Felix Kling
Felix Kling

Reputation: 816442

Do you notice something strange here?

onClick="tic("aa")"

have a look at the quotation marks. Your attribute value is actually

onClick="tic("

which is not valid JavaScript. Use different quotation marks inside the value:

onClick="tic('aa')"

The other problem is that there is no element with ID aa or ab, so document.getElementById(a) will return null. If you intend to refer to the buttons, you can either give them the IDs, or simply pass the element itself directly to the function:

<script>
function tic(element) {
   element.value = "x";
}
</script>

<input value=" " name="aa" type="button" onClick="tic(this)">

I recommend to read these articles to learn more about event handling, and about DOM.

Upvotes: 3

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93203

function tic(a) {
    a.value = "x";
};

then :

<input value=" " name="aa" id="aa" type="button" onclick="tic(this);">

Upvotes: 1

Amit Joki
Amit Joki

Reputation: 59232

onClick="tic("aa")" should be: 

onClick="tic('aa')"
             ^--^-----------single quotes so you don't need to escape them

Also, you should use ids instead of names since you are using getElementById:

        <td> 
            <input value=" " id="aa" type="button" onClick="tic('aa')">
        </td>
        <td>
            <input value=" " id="ab" type="button" onClick="tic('ab')">
        </td>

Another option is to pass this as argument and then modify its value in the function instead.

Like:

function tic(el) {
   el.value = "x";
}

Pass it this:

tic(this)

Upvotes: 0

Giacomo1968
Giacomo1968

Reputation: 26066

This should work now. Your function is calling document.getElementById() but you only have name= set & not id=. So I have set id= values for the <input> buttons. Also adjusted the onClick values to be have single quotes for the values and a ; after the function call.

<!doctype html>
<html>
<head>
<style>
</style>
<script>
function tic(a) {
document.getElementById(a).value = "x";
}
</script>
</head>
<body>
<center>
Tic-Tac-Toe
</center>
<center>
<table>
    <tr>
        <td>
            <input value=" " name="aa" id="aa" type="button" onClick="tic('aa');">
        </td>
        <td>
            <input value=" " name="ab" id="ab" type="button" onClick="tic('ab');">
        </td>
    <tr>
</table>
</center>
</body>
</html>

Upvotes: 0

Related Questions