当鼠标停留在输入上时出现的占位符

Question

我正在制作一款井字游戏。我已经做了所有的事情，但现在我觉得应该有一个功能，显示X或O当光标在各自的输入框。下面的代码是我的HTML。只是一部分，但我想你会知道它是如何工作的。

<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>

好的，所以你可以看到有9个输入框，当点击时根据玩家的回合显示X或O。输入图片描述

这是它现在的样子。现在我只需要Javascript。我认为代码应该改变占位符，以便当光标在单元格上时，它会显示X或O作为占位符，当光标不在单元格顶部时，占位符不再存在，现在我不知道我该怎么做。我很想看到解决办法。非常感谢!

Answer 1

最好包含你已经拥有的javascript，但是据我所知，我认为这是你正在寻找的:

你想要添加一个onmouseover属性，它调用一个javascript函数，看起来有点像这样:

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

我确实建议你显示你的整个javascript，这样我们可以更好地帮助你，因为我也建议，而不是每次使用不同的数字myfunc()使用更具描述性的标题。此外，函数是这样创建的，所以你不需要每次都重复相同的代码行，所以有8个函数做同样的事情有点违背目的。最好使用元素id作为参数，就像我在上面的例子中所做的那样。