詳しい人求む！

js doctype宣言を打つとプログラムが動きません

解決済

質問者：Atom3991
質問日時：2019/11/18 21:25
回答数：2件

js初心者です。
ネットの記事を参考にプログラムを書いたのですが、<！doctype html>を打つとプログラムが作動しません。どこが間違っているのかわからないので教えてくれると助かります。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>sample</title>
</head>

<body background="background.jpg">
<div id="mario" style="POSITION:absolute;Z-INDEX:1;VISIBILITY:visible;TOP:380px;LEFT:680px;">
<img src="mario.jpg" width="24" height="36">
</div>
<script>
var x = 680;
var y = 380;
var pv = 10;

var left = 0;
var up = 0;
var right = 0;
var down = 0;

function keydown(event){

if(event.which == 37){
left = 1;
}
if(event.which == 38){
up = 1;
}
if(event.which == 39){
right = 1;
}
if(event.which == 40){
down = 1;
}
disp();
}

function disp(){
if(left==1){
x = x - pv;
}
if(up==1){
y = y - pv;
}
if(right==1){
x = x + pv;
}
if(down==1){
y = y + pv;
}

document.getElementById("mario").style.left=x;
document.getElementById("mario").style.top=y;
}

function keyup(event){
if(event.which == 37){
left = 0;
}
if(event.which == 38){
up = 0;
}
if(event.which == 39){
right = 0;
}
if(event.which == 40){
down = 0;
}
}

document.onkeydown = keydown;
document.onkeyup = keyup;
</script>
</body>
</html>

作っているプログラムは十字キーに対応して画像を上下左右に動かすプログラムです。
本当に初心者ですので易しめでよろしくお願いします。m(__)m

補足日時：2019/11/18 21:35
通報する

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2019/11/19 09:45

こんにちは

要素の位置指定には単位が必要ですので、お忘れなきように。
＞document.getElementById("mario").style.left=x;
＞document.getElementById("mario").style.top=y;
　　　↓　　↓　　↓
　document.getElementById("mario").style.left = x + "px";
　document.getElementById("mario").style.top = y + "px";

なお、
＞<！doctype html>を打つと～～
2文字目が全角なので、DOCTYPE宣言とはみなされないはずです。

- 2
- 件

通報する

この回答へのお礼

ありがとうございます！無事動きました！！

通報する

お礼日時：2019/11/21 14:25

No.2

回答者： Ogre7077
回答日時：2019/11/19 13:16

<!doctype html> を指定すると、Web ブラウザは

「後方互換モード」ではなく、
「標準準拠モード」に切り替えます。

ご質問の場合ですと、後方互換モードの振る舞いである
「CSS パーサは単位のない数値を px 指定として解釈」が無くなる為に
style の指定が無視されていると思われます。

誤: style.left = x;
正: style.left = x + 'px';

標準準拠モードを考慮していないような古い記事を教科書としていると、
このモード間の違いに悩まされることが多いので、
出来るだけ新しい情報源を基に勉強することをお勧めします。

参考
https://developer.mozilla.org/ja/docs/Web/CSS/left
https://developer.mozilla.org/ja/docs/Web/HTML/Q …
https://developer.mozilla.org/ja/docs/Mozilla_Qu …