2016-05-03 14 views
0

ボタンクリックで関数を呼び出そうとしていますが、何らかの理由でボタンが関数を呼び出すことはありません。 Dreamweaverでは構文エラーは表示されません。誰も私のボタンが動作していない理由を教えてもらえますか?ボタンが関数を正しく呼び出せない

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta charset="utf-8" /> 
    </head> 
    <head> 
    <title></title> 


<script type="text/javascript"> 

     var imgObj = 0; 
     var imgObj1 = 0; 
     var animate; 
     var animate1; 

     function init(){ 
      imgObj = document.getElementById('red'); 
      imgObj.style.position= 'relative'; 
      imgObj.style.left = '0px'; 
      imgObj1 = document.getElementById('blue'); 
      imgObj1.style.position = 'relative'; 
      imgObj1.style.left = '0px'; 
     } 

     function moveRight(){ 
      imgObj.style.left = parseInt(imgObj.style.left = 0) + Math.floor((Math.random() * 100) + 1) + 'px'; 

      animate = setTimeout(moveRight(), 1000); 
      imgObj1.style.left = parseInt(imgObj1.style.left = 0) + Math.floor((Math.random() * 100) + 1) + 'px'; 

      animate1 = setTimeout(moveRight(), 1000); 
      if (imgObj.style.left >= 1000px || imgObj1.style.left >= 1000px) 
      { 
       break; 
       else if 
       { 
        imgObj.style.left>= 1000 
        MessageBox.show("The Red Car has won the Race!"); 
       } 
       else 
       { 
        MessageBox.show("The Blue Car has won the Race!"); 
       } 

      } 
     }   
</script> 

</head> 

<body onload = "init()"> 

    <form> 
    <input type="button" value="Start" onclick="moveRight()" /> 
    <br/><br/><br/><br><br/><br/><br/> 
    <img id="red" src="redcar.png" alt="Car 1"/> 
    <br/><br/><br/><br> 
    <img id="blue" src="bluecar.png" alt ="Car 2" /> 

    </form> 
</body> 
</html> 
+0

何のボタンをクリックされるが何をしたとします

は、ここで「作業」バージョンですか? – gurvinder372

+0

1つのこと; 'setTimeout(moveRight(1000));'は 'setTimeout(moveRight、1000);でなければなりません – Andy

+0

ボタンのクリックは機能しますか?別名、アラートを追加してアラートを出しますか? imgObjが正しく見つかりましたか?次に、タイムアウトの構文です。 – Shilly

答えて

1

残念ながら、どこから始めるべきかを知るのは難しいほど多くのエラーがあります。あなたの質問に対する最初の答えは、コードがコンパイルされないためにボタンが何もしなかったことです。 Dreamweaverでエラーが報告されなかった理由はわかりません。 Chromeのデベロッパーツールはこれを喜んで受けました。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<script type="text/javascript"> 
var imgObj = 0; 
var imgObj1 = 0; 
var animate1; 

function init(){ 
    imgObj = document.getElementById('red'); 
    imgObj.style.position= 'relative'; 
    imgObj.style.left = '0px'; 
    imgObj1 = document.getElementById('blue'); 
    imgObj1.style.position = 'relative'; 
    imgObj1.style.left = '0px'; 
} 

function moveRight(){ 
    var redPosition = parseInt(imgObj.style.left); 
    imgObj.style.left = redPosition + Math.floor((Math.random() * 20) + 1) + 'px'; 
    var bluePosition = parseInt(imgObj.style.left); 
    imgObj1.style.left = bluePosition + Math.floor((Math.random() * 20) + 1) + 'px'; 

    if (redPosition >= 1000 || bluePosition >= 1000) 
    { 
     if (redPosition >= 1000) { 
      alert("The Red Car has won the Race!"); 
     } 
     else 
     { 
      alert("The Blue Car has won the Race!"); 
     } 
     return; 
    } 
    animate1 = setTimeout(moveRight, 50); 
} 
</script> 
</head> 
<body onload = "init()"> 
<form> 
    <input type="button" value="Start" onclick="moveRight()" /> 
    <br/><br/><br/><br><br/><br/><br/> 
    <img id="red" src="redcar.png" alt="Car 1"/> 
    <br/><br/><br/><br> 
    <img id="blue" src="bluecar.png" alt ="Car 2" /> 
</form> 
</body> 
</html> 
+0

あなたはそれを稼働させるために必要なすべての変更を教えていただけますか? – Abhishek

+0

すべてのコメントを見る... – Andy

+0

ありがとうございます。私はしばらくの間、Chromeに切り替えると思う。アラートでは、カスタムボタンを追加できないことを理解しています。レースをリセットするボタンがダイアログボックスに表示されるようにする方法がありますか?私が限られた知識を持って考えることができる唯一の方法は、レースが終わったときに見えるようになるページ上にボタンを隠すことです。 – Shadough

関連する問題