Placeholder that appears when mouse is over the input

Question

I am working on a Tic Tac Toe game. I have done everything but now I feel that there should be a feature that shows X or O when the cursor is over the respective input box. The below code is my HTML. Just part of it but I think you will come to know how it works.

 <table style="border-collapse: collapse" cellpadding="0" cellspacing="0"> <tr> <th colspan=3> <h1>Tic Tac Toe</h1> </th> </tr> <tr> <th align="right"> <input class="cell" id="b1" type="text" onclick="myfunc_3(); myfunc();" readonly> </th> <th> <input class="cell" id="b2" type="text" onclick="myfunc_4(); myfunc();" readonly> </th> <th align="left"> <input class="cell" id="b3" type="text" onclick="myfunc_5(); myfunc();" readonly> </th> </tr> <tr> <th align="right"> <input class="cell" id="b4" type="text" onclick="myfunc_6(); myfunc();" readonly> </th> <th> <input class="cell" id="b5" type="text" onclick="myfunc_7(); myfunc();" readonly> </th> <th align="left"> <input class="cell" id="b6" type="text" onclick="myfunc_8(); myfunc();" readonly> </th> </tr> <tr> <th align="right"> <input class="cell" id="b7" type="text" onclick="myfunc_9(); myfunc();" readonly> </th> <th> <input class="cell" id="b8" type="text" onclick="myfunc_10(); myfunc();" readonly> </th> <th align="left"> <input class="cell" id="b9" type="text" onclick="myfunc_11(); myfunc();" readonly> </th> </tr> <tr> <th colspan="3"> <p id="print"></p> </th> </tr> <tr> <th id="restartBtn" colspan="3"> <button id="startGame" onclick="myfunc_2()">Restart Game!</button> </th> </tr> <tr> <th id="darkBtn" colspan="3"> <button id="darkMode" onclick="darkMode()">Turn On Dark Mode!</button> </th> </tr> </table>

Ok, so as you can see there are 9 input boxes which when clicked display X or O as per the turn of the player. enter image description here

This is how it looks right now. Now all I need is the Javascript. I think that the code should change the placeholder so that when the cursor is over the cell It would show X or O as placeholder and when the cursor is not on top of cell the placeholder is not there anymore now I don't know how I would do it. I would love to see a solution. Thank you so much!

Answer 1

It would be best to include the javascript that you already have, however from what I understand I think this is what you're looking for:

You would want to add a onmouseover attribute that calls a javascript function that looks a bit like this:

function showPlaceholder (id) {
    document.getElementById(id).placeholder = 'yourPlaceholder';
}

I do recommend that you show your entire javascript so we can help you better, as I also recommend instead of using a myfunc() every time with a different number to use a more descriptive title. Also, functions are made so you do not need to repeat the same lines of code every time so having 8 functions that do all the same thing kind of defeats the purpose. It is better to use the element id as a parameter as I did in the example above.