質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.06%

JavaScript 右下の画像を左下に移動ができないです。。。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 139

score 1

左画像を右移動 右下の画像を左移動させ続けたいです

右下の子が動かない理由がわからなくて教えていただけると嬉しいです。

HTML
<html>
<head>
<meta charset="utf-8">
<title>マウス君</title>
<script src="mousekun.js"></script>
</head>

<body>
<p><input type="button" value="実行" 
onclick="mousekunMove()"></p>
<p><input type="button" value="停止" 
onclick="mousekunStop()"></p>
<img src="imgM1.gif" border="0" id="img1"
style="position:absolute">

<img src="imgM2.gif" border="0" id="img2" 
style="position:absolute"  >

<style>

img2 {position:absolute;

right:10px;
bottom:1px;

}
</style>

</body>
</html>

javascript
var timer1, timer2;
var i;

var imgLeftStart = 0;
var imgLeftEnd = 500;
var imgLeft = imgLeftStart;
var imgTop =100;
var moveStep = 5;
var moveSpeed = 100;

//マウス君の移動
function mousekunMove() {

timer1= setInterval("rightMove()",50);
timer2=setInterval("leftMove()",50);
}

//マウス君停止

function mousekunStop() {
clearInterval(timer1);

}

//右に移動
function rightMove() {

imgLeft += moveStep;

if(imgLeft > imgLeftEnd){
imgLeft = imgLeftStart;
}
document.getElementById("img1").style.top=imgTop;
document.getElementById("img1").style.left=imgLeft;
}

//左に移動
function leftMove(){
imgRight += moveStep;

if(imgRight > imgRightEnd){
imgRight = imgRightStart;
}
document.getElementById("img2").style.bottom=imgBottom;
document.getElementById("img2").style.right=imgRight;
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • itagagaki

    2021/05/05 01:53

    コードの貼り付けがちゃんとできていないようですので、やり直してください。

    キャンセル

  • m.ts10806

    2021/05/05 06:57

    コードやエラーはマークダウンのcode機能を利用してご提示ください。
    https://teratail.com/questions/238564

    あと質問内「Java」と書かれていますが、「Java」と「JavaScript」は全く別物ですのでご注意を。

    キャンセル

  • yannnnn-88

    2021/05/05 13:07

    ありがとうございます。Javaとjavascript って別物なんですね。丁寧にありがとうございます。
    具体的にはどうしたらいいでしょうか?

    キャンセル

回答 1

checkベストアンサー

0

質問を整形してほしくて修正依頼しましたが、まあわかったのでいいです。

いくつかコードの誤りを見つけました。

JavaScriptの変数 imgRight imgRightEnd imgRightStart imgBottom が宣言されていません。

HTML内に img2 に対するスタイルを記述していますが、これはたぶん #img2 ですね。
そして #img1 に対するスタイルの指定がありません。

document.getElementById("img1").style.left=imgLeft; などとしているのは、
document.getElementById("img1").style.left=imgLeft + "px"; にしないと、たぶん期待通りにならないと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/05/06 19:43

    ありがとうございます。
    早速やってみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る