JavaScript私のvolumeSliderを最新の値に設定するにはどうすればよいですか？

Question

JavaScriptの

var videoPlayer = document.getElementById('videoPlayer'); 
var volumeSlider = document.getElementById('volumeSlider'); 
mutePlayer.addEventListener('click', function() { 
    var mutePlayer = document.getElementById('mutePlayer'); 
    var playMute = document.getElementById('playMute'); 

    if(videoPlayer.muted) { 
    videoPlayer.muted = false; 
    playMute.src = "img/mute.png"; 
    volumeSlider.value = 100; /** THIS IS THE PROBLEM RIGHT NOW I HAVE JUST SET IT TO 100 */ 
    } else { 
    videoPlayer.muted = true; 
    playMute.src = "img/unmute.png"; 
    volumeSlider.value = 0; 
    } 
}); 
volumeSlider.addEventListener('change', function() { 
    videoPlayer.volume = volumeSlider.value/100; 
}); 

このコードは#volumeSlider

の現在値が、私はこれを試してみましたが、私はスコープそのため、変数volumeSliderにアクセスカントなければなりませんか？

volumeSlider.addEventListener('click', function() { 
    var volumeSlider = volumeSlider.value; 
    return; 
}); 

HTML5

<video id='videoPlayer' class="videoPlayer" width="640px" height="360px"> 
    <source id="Video" src="vid/bbb.mp4" type="video/mp4" height="360px" width="640px"> 
</video> 
<button id='mutePlayer'class="center" > 
    <img id='playMute' src='img/mute.png'> 
</button> 
<input id='volumeSlider'class="center" type="range" min='0' value='100' step="1"></input> 

誰かが私がこれをクラック助けることができますか？

Answer 1

コードが正しく実行されない理由はいくつかあります。スコープ内のグローバル変数を変更する場合は、変数名の前にvarを入れないでください。

私がコードで変更したのは、デフォルト値が100に設定されていることですが、スライダをクリックすると、入力値がクリックされた値に設定されます。コードは次のようになります。私も、入力の値は、それがミュートされていないことを意味して0を超えている場合、ミュート画像にボタン画像を設定し、あなたのための小さな機能を追加しました

var videoPlayer = document.getElementById('videoPlayer'), 
mutePlayer = document.getElementById('mutePlayer'), 
playMute = document.getElementById('playMute'), 
volumeSlider = document.getElementById('volumeSlider'), 
durationTimeText = document.getElementById('durationTimeText').innerHTML = "01:00", 
videoPlayerVolume = 100; 

volumeSlider.value = 100; 

mutePlayer.addEventListener('click', function() { 
if (videoPlayer.muted) { 
    volumeSlider.value = cachedVolume; 
    videoPlayer.muted = false; 
    playMute.src = "img/mute.png"; 
} else { 
    cachedVolume = volumeSlider.value; 
    videoPlayer.muted = true; 
    playMute.src = "img/unmute.png"; 

    volumeSlider.value = 0; 
    } 
}); 

volumeSlider.addEventListener('change', function() { 
    videoPlayerVolume = volumeSlider.setAttribute('value', this.value); 
    if (volumeSlider.value > 0) { 
     playMute.src = "img/mute.png"; 
    } 
}); 

。

キーワードthisに質問すると、クリックされた要素が取り込まれ、それ自体が置き換えられます。 thisキーワードhereの詳細については、こちらをご覧ください。

私はそれが助けてくれることを願っています。