学習はじめたばかりの初心者です。 以下のコードで、猫が現れるはずですが、画面に何も現れません。 ご指導いただければ、助かります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script> let x; let y; let zx=[]; let zy=[]; let n=1; let pic="neko.jpg"; for(let k=1;k<=100;k++){ let myImg=document.createElement("img"); myImg.id="p"+k; document.getElementById("field").appendChild(myImg); } window.addEventListener("mousemove",function(e){ x=e.cilentX; y=e.cilentY; zx[n]=x; zy[n]=y; if(n>=100){ n=1; }else{ n=n+1; } for(let k=3;k<=100;k=k+3){ if(zx[k]>0){ document.getElementById("p"+k).src=pic; document.getElementById("p"+k).style.left=zx[k]+"px"; document.getElementById("p"+k).style.top=zy[k]+"px"; } } }.fales)
</script>
</head>
<body>
</body>
</html>
neko.jpg は、index.html と同じ階層にあります。
No.1ベストアンサー
- 回答日時:
こんにちは
>学習はじめたばかりの初心者です。
なぜ、このような可読性の悪いスクリプトの書き方をしているのかわかりません。
誤記の発生のもとですし、デバッグをするにしても面倒でしょうに。
さて、ご質問の件ですが・・・
全体の構文として、スクリプトが実行される際にはHTMLのbodyは未だ読み込まれていないので、
>document.getElementById("field").appendChild(myImg)
は実行されません。
そもそも、ご提示のHTMLにはid="field"という要素もありませんけれど…
ひとまず、実行されるようにするには、上記要素を追加の上、スクリプト全体をbodyの閉じタグの直前に移すことです。
さらに、単純な誤記が、イベント設定の文末の
>.fales)
カンマの誤記とfalseの誤記が重なっています。
これらを修正することで、ひとまずスクリプトは実行されるようになります。
(それだけでは、画像は表示されませんけれど)
後半のイベント処理が何をしたいのか、全く不明ですが、ひとまず表示されるようにするなら、
>x=e.cilentX;
>y=e.cilentY;
の部分を
x = e.pageX;
y = e.pageY;
とでもしておけば、表示されるようになることでしょう。
No.2
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript window.openで開く...
-
webページ上のTabキーの動き
-
ブックマークレットの() 背景...
-
XMLでのAttributeを持ったNode...
-
javascriptの基本的なことだと...
-
投稿画像の確認画面
-
responseTextについて
-
ラジオボタンでreadonlyの切替え
-
codejump 模写コーディングgall...
-
同じIDで定義した要素の配列を...
-
javascriptでiframeのURL変更は?
-
ボタンをクリックすると数が増...
-
jspからjavascriptの変数引継ぎ
-
functionから別のfunctionを実...
-
C#で、ContextMenuStripに動的...
-
クリックすると上に開くアコー...
-
画像上のクリックした場所が分...
-
undefinedを表示させない方法は...
-
var_dumpのdump意味はを知りた...
-
hoge の謎
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
乗換案内 VBAで操作したい
-
onClickイベントの変更方法
-
TexでΣの添え字の位置直し
-
javascriptの基本的なことだと...
-
Latexに関する質問です。
-
サブウィンドウに背景色をつけ...
-
XMLでのAttributeを持ったNode...
-
excle VBA とweb上の検索を利用...
-
javascriptのdocument.allにつ...
-
スマホでフォームにフォーカス...
-
Null またはオブジェクトではあ...
-
ラジオボタンでreadonlyの切替え
-
文字がマウスカーソルを追従す...
-
LaTeX:数式を等号揃えにする方法
-
選択によってsubmitボタンの色...
-
UWSCでオンクリックのボタンを...
-
VBAのIE操作でframe構造のサイ...
-
DOM要素を削除しても、イベント...
-
webページ上のTabキーの動き
おすすめ情報

