※ ChatGPTを利用し、要約された質問です（原文：あとだしじゃんけんで）
あとだしじゃんけんでキーコードによってグー、チョキ、パーを表示できない理由
このQ&Aのポイント
JavaScriptであとだしじゃんけんを作っていますが、キーコードによってグー、チョキ、パーの表示ができません。
質問文のコードにはKeycodeを取得するための処理がないため、キーコードに応じて画像を表示することができません。
アプリケーションにキーコードによる入力判定の処理を追加することで、グー、チョキ、パーの表示ができるようになります。
こんにちは。趣味でjavascriptをしている者です。
さっそくですが質問させていただきます
あとだしじゃんけんを作っているのですが、
キーコードによって、グー、チョキ、パーを表示させることが
できません・・・
以下のコードの悪い点を指摘していただけないでしょうか
よろしくお願いします
<html>
<head>
<script type="text/javascript">
function init()
{
document.onkeypress = KeyPressed;
}
function KeyPressed()
{
switch(event.keyCode) {
case 49: appendElement ( "Mytable", "jk/Myhand1.jpg");
break;
case 50: appendElement( "Mytable", "jk/Myhand2.jpg");
break;
case 51: appendElement( "Mytable", "jk/Myhand3.jpg");
break;
default: break;
}
}
function henkou()
{
document.getElementById("span1").childNodes[0].nodeValue = "こんばんは!!";
}
function removeElement( id )
{
var obj = document.getElementById( id );
if ( obj.hasChildNodes() ) {
obj.removeChild( obj.lastChild );
}
}
function appendElement( pid, src)
{
var pobj = document.getElementById( pid );
var cobj = document.createElement("img");
cobj.src = src;
pobj.appendChild( cobj );
}
</script>
</head>
<body bgColor="rgb(230,240,250)">
<form name="Form1">
<input type="button" value="変更" onClick="henkou()">
<input type="button" value="remove1" onClick="removeElement( 'PCtable' );">
<input type="button" value="remove2" onClick="removeElement( 'Mytable' );"><br>
<input type="button" value="append1" onClick="appendElement( 'PCtable', 'jk/PChand3.jpg' );">
</form>
<div id="div1" style="position:absolute; left:130px; top:80px;">
<table width="200" height="200" bgColor="00ef66">
<td id="PCtable">
<img id="PHi" src="jk/PChand1.jpg"></td></table>
</div>
<div id="div2" style="position:absolute; left:430px; top:80px;">
<table width="200" height="200" bgColor="00ef66">
<td id="Mytable">
<img id="MHi" src="jk/Myhand1.jpg"></td></table>
</div>
<div style="position:absolute; left:360px; top:210px;">
<span id="spanvs" style="color:#ff2244; font-size:36px; font-weight:bold;">
VS
</span>
</div>
<div style="position:absolute; left:100px; top:310px;">
<span id="span1" style="color:#0055ff; font-size:26px; font-weight:bold;">
こんにちは
</span>
</div>
<div style="position:absolute; left:100px; top:350px;">
<span id="span1" style="color:#00ff55; font-size:26px; font-weight:bold;">
おはようございます
</span>
</div>
</body>
</html>
お礼
回答していただきありがとうございます 字数の制限で、コードを全て載せられませんでしたが、 setTimeoutの引数の関数を "f() "で囲んだら、動いてくれました ただ、判定の関数が、おかしかったり、動いているように見えている だけかもしれませんが・・・ また、わからないことがあれば質問させていただきますので よろしくお願いします