学習はじめたばかりの初心者です。以下のコードで、猫が現れるはずですが、画面に何も現れません。ご指導いただければ、助かります。 let x; let y; let zx=[]; let zy=[]; let n=1; let pic="neko.jpg"; for(let k=1;k =100){ n=1; }else{ n=n+1; } for(let k=3;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) neko.jpg は、index.html と同じ階層にあります。

詳しい人求む！

javascriptでコードを書いたのですが、うまく行きません。

解決済

質問者：kensakusan
質問日時：2021/02/05 15:32
回答数：2件

学習はじめたばかりの初心者です。以下のコードで、猫が現れるはずですが、画面に何も現れません。ご指導いただければ、助かります。
<!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　と同じ階層にあります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2

回答者： Ogre7077
回答日時：2021/02/05 16:32

No.1 の回答に追加で

要素.style.left の説明をよく読みましょう
https://developer.mozilla.org/ja/docs/Web/CSS/left

- 0
- 件

通報する

No.1ベストアンサー

回答者： fujillin
回答日時：2021/02/05 16:24

こんにちは

＞学習はじめたばかりの初心者です。
なぜ、このような可読性の悪いスクリプトの書き方をしているのかわかりません。
誤記の発生のもとですし、デバッグをするにしても面倒でしょうに。

さて、ご質問の件ですが・・・
全体の構文として、スクリプトが実行される際には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;
とでもしておけば、表示されるようになることでしょう。