javascriptでの動かし方について

前提・実現した

img2が左に動くようにしたいです。

発生している問題・エラーメッセージ

img1が右に、img2が左に動くようにしたいのですがimg2が動いてくれません。
「左に動く」の部分にimg2の定義づけ、「右に動く」の部分にimg1の定義づけができていないことが原因だと考えているのですが、どのように書けば定義づけができますか？
また、他に原因があり、気づいたことがあれば教えていただけるとうれしいです。
初めての投稿でcodeを押すというのを見よう見まねでやってみたのですが、できていなければおっしゃってください。

該当のソースコード

<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;top:400px;left:400px;">
  
 
  </body>
</html>

var timer1,timer2;
var i;

var imgLeftStart = 0;
var imgLeftEnd = 500;
var imgLeft = imgLeftStart;
var imgRightStart = 500;
var imgRightEnd = 0; 
var imgRight = imgRightStart;
var imgBottom =500;  
var imgTop =100;
var moveStep = 5;
var moveSpeed = 100;

//マウス君の移動 
function mousekunMove() {
 timer1 = setInterval("rightMove()", 50);
 timer2 = setInterval("leftMove()", 50 );
  
  
}

//マウス君の停止
function mousekunStop() {
  clearInterval(timer1,2);
  
}


//右に移動
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;

}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/05/12 04:14

要件に対して現状のコードにおける問題点は何でしょうか。「とりあえず全部見ておかしいところなおして」だと質問ではなく作業依頼になってしまいます。また、Javascriptのコード内にPHPのコードがありますが、本件とどう関係しますか？

lulu.

2021/05/12 05:47

問題点はimg2が全く動かないことです。右に移動と左に移動のところにimg1とimg2の定義づけができていないことが原因かと考えているのですが、どのように定義づけすればいいのかも分かりません。 phpはコードの貼り付けの仕方を調べたときに書いてあったので書いてみただけなので本文とは関係がありません。

m.ts10806

2021/05/12 07:07 編集

質問は編集できますし、書いたとおりにしか見てる人は理解できないので、本文と関係のない情報はノイズとなり混乱の元となります。調整願います

lulu.

2021/05/12 07:24

失礼いたしました。調整しましたので、助言をいただければ幸いです。

m.ts10806

2021/05/12 07:38

「本文と関係ない」といえばcode云々はあくまで質問の書き方部分なので本件とは無関係で、先にコメントで返信いただいた「問題点は〜」の部分は本文に必要な情報です。質問者さん自身がどの程度の問題を把握しているかという情報があれば丸投げ感も薄まり、アドバイスの確度にも繋がります

lulu.

2021/05/13 01:22

ありがとうございます。勉強になります。以後、注意して質問いたします。ちなみに、問題点はコメントに書いたことであっているのでしょうか？合っていたならば、どのように定義づけすればいいのか教えていただけませんか？

m.ts10806

2021/05/13 01:30 編集

記載してもらいたいのは「質問者自身が認識している問題、課題」なので、質問者自身が自分の思いを文章にできているのでしたら「合っている」です。質問本文に反映してくださいね。

lulu.

2021/05/13 05:31

わかりました。ありがとうございます。

行動規範の内容に同意します

回答2件

自己解決

BottomをTop2に変更し、img2の位置の指定をやめたところ、正常に動きました。

投稿2021/05/14 03:13

lulu.

総合スコア1

javascript
1let timerId;
2const moveStep=10;
3const moveSpeed = 100;
4function mousekunMove(){
5  let sty=document.querySelector('#img2').style;
6  timerId=setInterval(()=>{
7    var left=parseInt(sty.left.match(/^\d+/)[0])-moveStep;
8    if(left<=0){
9      clearInterval(timerId);
10    }else{
11      sty.left=left;
12    }
13  },moveSpeed);
14}
15