Q&A
JavaScript
を質問タグとして追加してください。
あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
HTML上でキー入力により画像の切り替えを行いたいです。
Visual Studio CodeでHTMLを作成しております。
最初に画像Aが表示され、矢印キーを押すと矢印に応じて、B,C,D,E に画像が切り替わるというものを作成しました。
ところが、一度AからBやCに画像が切り替わるとその後は何を押しても切り替わったままです。
左を押したら、Bが出て、その後右を押したらCが出るという風にしたいです。
以下、ソースコードです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ITM second</title> </head> <body> <img src="A.png", width="700" height="433" border="0" alt=""> <script> //なにかキーが押されたとき、keydownfuncという関数を呼び出す addEventListener( "keydown", keydownfunc ); //キーが押されたときに呼び出される関数 function keydownfunc( event ) { //押されたボタンに割り当てられた数値（すうち）を、key_codeに代入 var key_code = event.keyCode; if( key_code === 37 ) document.write( '<img src="B.png">' ); //「左ボタン」が押されたとき if( key_code === 38 ) document.write( '<img src="C.png">' ); //「上ボタン」が押されたとき if( key_code === 39 ) document.write( '<img src="D.png">' ); //「右ボタン」が押されたとき if( key_code === 40 ) document.write( '<img src="E.png">' ); //「下ボタン」が押されたとき } </script> </body> </html>
繰り返し処理が必要なのかなと調べてやってみましたが、うまくできませんでした。
お知恵をいただけるととてもありがたいです。
また、document.write()はHTML構造を壊しやすくなるとして非推奨なので別機能の検討を。
ありがとうございます。
今日初めてHTMLに触れたのでdocument.write()が良くないこと知りませんでした。
ありがとうございました。
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
>今日初めてHTMLに触れたので
いえ、HTMLではなくJavaScriptです。
これはJavaScriptなんですね。
ありがとうございます。
どうなったら「解決」なのでしょうか。
https://teratail.com/help/question-tips#questionTips4
申し訳ございません。
解決にするのをわかっておりませんでした！
解決済にします。
回答2件
0
ベストアンサー
1回キーを押すと、
document.write()によりbody内まるっと上書きしてます。
キー押す前
キー押した後
書いたJavaScriptすらも消えてます。
documentにwriteするため、こうなっています。
「画像」だけ切り替えたいなら、画像のsrcの中だけを切り替えた方が良いです。
html
1 2<img src="A.png" width="700" height="433" border="0" alt="" id="imagechange">
キーと画像が対応するオブジェクトでも持っておけばifも少なくて済みます。
例
js
1const list = { 2 37:"B" 3,38:"C" 4,39:"D" 5,40:"E" 6} 7//なにかキーが押されたとき、keydownfuncという関数を呼び出す 8addEventListener( "keydown", keydownfunc ); 9 10//キーが押されたときに呼び出される関数 11function keydownfunc( event ) { 12 13 //押されたボタンに割り当てられた数値（すうち）を、key_codeに代入 14 let img = document.getElementById("imagechange"); 15 let key_code = event.keyCode; 16 if(list[key_code]){ 17 img.src = list[key_code]+".png"; 18 }else{ 19 img.src = "A.png"; 20 } 21}
投稿2021/06/14 09:42
総合スコア80898
0
javascript
1<img src="A.png" id="img"> 2<script> 3document.addEventListener( "keydown",e=>{ 4 var key_code = e.keyCode; 5 var src="A.png"; 6 if( key_code === 37 ) src="B.png"; 7 if( key_code === 38 ) src="C.png"; 8 if( key_code === 39 ) src="D.png"; 9 if( key_code === 40 ) src="E.png"; 10 document.querySelector('#img').src=src; 11}); 12</script>
投稿2021/06/14 10:28
総合スコア118471
あなたの回答
tips
プレビュー
