Javascript - ボタンが最初に押されたときのアニメーションのみ

私はonmousedownを使って呼び出されるアニメーションを持っています。私はアニメーションを止める別の機能を持っています（onmouseup）。Javascript - ボタンが最初に押されたときのアニメーションのみ

問題は最初にしか動作しないことです。それは私がボタンを保持すると、それは動作し、押し下げを止めると停止しますが、最初の時間の後にどちらかのボタンを使用しようとすると何も起こりません。それは単に動きません。

これは私のHTMLコード（index.htmを）です：

<html> 
<head><link rel='stylesheet' href='style.css'></head> 
<body> 
    <img id='player' src='img/player.png' style='height:64px;'></img> 
    <div class='buttons'> 
     <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)"><--</button> 
     <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">--></button> 
    </div> 
</body> 
</html> 


<script type='text/javascript' src='move.js'></script>

これは私のJavaScriptコード（move.js）です：

var elem = document.getElementById("player"); 
function OnButtonDownl (button) { 
var posl = document.getElementById("player").style.left; 
window.idl = setInterval(framel, 5); 
function framel() { 
    posl--; 
    elem.style.left = posl + 'px'; 
}} 
function OnButtonUpl (button) { 
    clearInterval(idl); 
} 

var elem = document.getElementById("player"); 
function OnButtonDownr (button) { 
var posr = document.getElementById("player").style.left; 
window.idr = setInterval(framer, 5); 
function framer() { 
    posr++; 
    elem.style.left = posr + 'px'; 
}} 
function OnButtonUpr (button) { 
    clearInterval(idr); 
}

おそらく、ここで重要なのではなく、私のCSS（スタイルです.css）：

body { 
    width: 100%; 
    height: 100%; 
position:relative; 
margin:0; 
overflow:hidden; 
} 
#player { 
    position: absolute; 
    left:0; 
    bottom:0; 
} 
.buttons { 
position:absolute; 
right:0; 
bottom:0; 
}

ご協力いただきありがとうございます。

出典

2016-07-12 Ben Welch

plunkrを追加できますか？ – Baruch

2回目にボタンを押したときにコンソールに何かが表示されますか？ –

あなたには2つの問題があります。あなたが最初poslとposrを取得すると

、あなたはJSが0に強制変換され、空の文字列を取得しています。あなたが0を強要px（これstring値にposlとposrを作る）

あなたposl--（およびposr++）缶増分を追加した後

--と++は動作しません。それが初めてのことです。次にmousedownのdocument.getElementById("player").style.leftは、"-1px"のような文字列であり、それは偽と解釈されません（0に強制されません）。キャッシュするときparseInt()を使用して回避することができますposl | posrしかし、あなたは0 parseInt("")ために戻っNaNのフォールバックを提供する必要が...

（あなたがposrを取得する場合にも、同様の変更で）あなたはそうのようなものを回避することができます。

var posl = parseInt(document.getElementById("player").style.left, 10) || 0;

var elem = document.getElementById("player"); 
 

 
function OnButtonDownl(button) { 
 
    //var posl = document.getElementById("player").style.left; 
 
    var posl = parseInt(document.getElementById("player").style.left, 10) || 0; 
 
    window.idl = setInterval(framel, 5); 
 

 
    function framel() { 
 
    posl--; 
 
    elem.style.left = posl + 'px'; 
 
    } 
 
} 
 

 
function OnButtonUpl(button) { 
 
    clearInterval(idl); 
 
} 
 

 
var elem = document.getElementById("player"); 
 

 
function OnButtonDownr(button) { 
 
    //var posr = document.getElementById("player").style.left; 
 
    var posr = parseInt(document.getElementById("player").style.left, 10) || 0; 
 
    window.idr = setInterval(framer, 5); 
 

 
    function framer() { 
 
    posr++; 
 
    elem.style.left = posr + 'px'; 
 
    } 
 
} 
 

 
function OnButtonUpr(button) { 
 
    clearInterval(idr); 
 
}

body { 
 
    width: 100vw;// changed for example only 
 
    height: 100vh;// changed for example only 
 
    position: relative; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
#player { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
.buttons { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<img id='player' src='//placekitten.com/102/102' /> 
 
<div class='buttons'> 
 
    <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)">Left</button> 
 
    <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">Right</button> 
 
</div>

出典

2016-07-12 16:27:23

まず第一に、あなたのhtmlタグ内のスクリプトタグを置くことをお勧めです：

HTML：：

<html> 
<head><link rel='stylesheet' href='style.css'></head> 
<body> 
    <img id='player' src='https://placeimg.com/54/45/any' style='height:64px;'></img> 
    <div class='buttons'> 
     <button id='moveleft' onmousedown="OnButtonDown('left')" onmouseup="OnButtonUp()"><--</button> 
     <button id='moveright' onmousedown="OnButtonDown('right')" onmouseup="OnButtonUp()">--></button> 
    </div> 

<script type='text/javascript' src='move.js'></script> 
</body> 
</html>

とJS：

<html> 
<head>...</head> 
<body>...</body> 
    <script type='text/javascript' src='move.js'></script> 
</html>

は、このソリューションをチェック完了

var nIntervId; 
var b; 
var elem = document.getElementById("player"); 

var posl = document.getElementById("player").style.left; 

function OnButtonDown(button) { 
b = button; 
nIntervId = setInterval(frame, 5); 
} 

function frame() { 
    if(b==='left'){ 
    posl--; 
    elem.style.left = posl + 'px';} 
    else{ 
    posl++; 
    elem.style.left = posl + 'px'; 
    } 
} 

function OnButtonUp() { 
    clearInterval(nIntervId); 
}

http://output.jsbin.com/varaseheru/

出典

2016-07-12 16:22:24 iomv

私はあなたのコードを書き直してくれました（私のために）。

function Move(elem){ 
    this.interval; 

    var posr = parseInt(getComputedStyle(document.getElementById("player")).left); 

    this.handleEvent = function(event) { 
     switch (event.type) { 
     case 'mousedown': 
      this.interval = setInterval(function() { 
       if (event.target.id == 'moveright') { 
        posr++; 
       } else if (event.target.id == 'moveleft'){ 
        posr--; 
       } 
       document.getElementById("player").style.left = posr + 'px'; 

      },5); 
      break; 
     case 'mouseup': 
      clearInterval(this.interval); 
      break; 
     } 
    } 
    elem.addEventListener('mousedown', this, false); 
    elem.addEventListener('mouseup', this, false); 

} 

var button_right = document.getElementById("moveright"); 
var button_left = document.getElementById("moveleft"); 

Move(button_right); 
Move(button_left);

そして、htmlではjsイベントリスナーを削除できます（これはidだけ必要です）。

出典

2016-07-12 16:22:33 macintoshkrug

Javascript - ボタンが最初に押されたときのアニメーションのみ

答えて

関連する問題