I currently have a function set up in my global.js file that starts a song and pauses it if the 4 key is pressed. However, when I implement this function it causes my routing to stop working. So in my mainMenu.js file when you press the 1 key it should bring you to game.html but nothing happens. I'm not sure of what is causing this interference. Any ideas as to how I can stop this from happening
global.js:
window.onload = function(){
}
//music
var audio = new Audio('/music/oregonMusic.mp3')
function checkSound(){
audio.play();
document.onkeypress = function(e){
if(audio.paused){
audio.play();
}
else if(!audio.paused && e.keyCode === 52){
audio.pause();
}
}
}
checkSound();
mainMenu.js:
window.onload = function(){
//console.log('swing');
checkSound();
}
document.onkeypress = function(e){
//console.log('key pressed: ' + e.keyCode)
if(e.keyCode === 49){
window.location = 'game'
}
else if(e.keyCode === 51){
window.location = "topTen"
}
}
using
document.onkeypress = function(e) { ... }; // 1
document.onkeypress = function(e) { ... }; // 2
results in only function // 2 being called on keypress
instead, you should use addEventListener
so, global.js
document.addEventListener('keypress', function(e) {
if(audio.paused){
audio.play();
}
else if(!audio.paused && e.keyCode === 52){
audio.pause();
}
});
and mainMenu.js
document.addEventListener('keypress', function(e) {
if(e.keyCode === 49){
window.location = 'game'
}
else if(e.keyCode === 51){
window.location = "topTen"
}
});
now both handlers will be called
Related
I'm still working on a music player, mouse controls have been assigned, but I'm having little trouble with keyboard events on the PLAY/PAUSE button.
So far, I got the user to be able to "click" the PLAY button by pressing SPACEBAR. What happens is that the PLAY button is being hidden and replaced by the PAUSE button.
Which I want now is getting the user to be able to press the SPACEBAR again so it "clicks" PAUSE, and therefore shows PLAY again.
Here is what I have :
html
<div>
</div>
script
<script>
/* mouse */
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
/* keyboard */
var play = document.getElementById("play");
var pause = document.getElementById("pause");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
pause.click();
}
};
</script>
What am I missing ?
the mistake is here:
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
} else if(e.keyCode == 32) {
pause.click();
}
};
the second condition cannot be executed because everytime the keyCode is 32 it's goes only in the first conditions.
You can declare a variable "isPlaying" that indicate you if the player is playing.
var isPlaying = false;
document.onkeydown = function (e) {
if (e.keyCode == 32) {
if (isPlaying) {
pause.click();
} else {
play.click();
}
isPlaying = !isPlaying; // if true equal false, if false equal true
}
};
the first mistake is that you arent closing all brackets,the second is this part of code:
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
pause.click();
}
i suggest to use a variable for check if the button play is being pressed or not:
var ispaused = true;
var play = document.getElementById("play");
var pause = document.getElementById("pause");
$('#play').on('click', function(event) {
ispaused = false;
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
/* keyboard */
});
$('#pause').on('click', function(event) {
ispaused = true;
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
document.onkeydown = function (e) {
if (e.keyCode == 32) {
if(ispaused == true ){
play.click();
}else{
pause.click();
}
}
};
fiddle
It works. you double check space keyCode when you space anytime and the first condition would be true every single time.
Second, you need to use $bla instead for $("#blablabla") .It runs almost 600 line Code with find object you select everytime.So don't be let duplicate work.
Final,$() is lik $(doucument).ready().It's all done when rendered it's done and DOM it's OK.THAT IS!
** code **
$(function () {
let $play = $("#play");
let $pause = $("#pause");
$play.on('click', function (event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$pause.show();
$play.hide();
});
$pause.on('click', function (event) {
//currentPlayingTrack.pause();
$pause.hide();
$play.show();
});
/* keyboard */
document.onkeydown = function (e) {
if (e.keyCode == 32) {
toggle = !toggle;
$play.trigger("click");
}
else if (e.keyCode == 32) {
toggle = !toggle;
$pause.trigger("click");
}
};
});
Seems like you're missing a bit more knowledge of js which will come with time :) Here's a codepen on how I'd accomplish this.
http://codepen.io/smplejohn/pen/zNVbRb
Play
Pause
$('.playpause').click(function(){
$('.playpause').toggle();
return false;
});
document.onkeydown = function (e) {
if (e.keyCode == 32){
$('.playpause').toggle();
}
};
How detect ctrl+q with javascript, this is my code
<body>
<p id="x"></p>
<script>
window.onkeydown = function() {detect(event);}
window.onkeypress = function() {res(event);}
var act = false;
function detect(event) {
if(event.ctrlKey) {
act = true;
}
else
act = false;
}
function res(event) {
if(act) {
document.getElementById("x").innerHTML = "ctrl " + String.fromCharCode(event.which);
}
else
document.getElementById("x").innerHTML = String.fromCharCode(event.which);
}
</script>
</body>
I want do it with javascript only.
You can detect it using the following function:
document.addEventListener("keydown", function (event) {
event.stopPropagation();
event.preventDefault();
if(event.ctrlKey && event.keyCode == 81)
{
console.log("CTRL + Q was pressed!");
}
else
{
console.log("Something else was pressed.");
}
});
The stopPropagation() and preventDefault() calls prevent the browser's default behaviour from occurring.
If you want to detect other keys, this page is rather useful: http://asquare.net/javascript/tests/KeyCode.html
i have a question. I want to detect, if a user has pressed F5 or the refresh button. If so, i want to change the page to index.html. Here is my code:
$(window).on('beforeunload',function(){
$.mobile.changePage($(document.location.href="/index.html"),{
transition:"slide",
changeHash:false
});
});
But it's not working. Has anybody a solution, how i can achieve this?
Thanks.
Just get the key value:
$(document).keypress(function(e) {
if(e.which == 116) {
window.location.href = '/index.html';
}
});
Key Reference
Alternative method:
document.onkeydown = fkey;
document.onkeypress = fkey
document.onkeyup = fkey;
var wasPressed = false;
function fkey(e){
e = e || window.event;
if( wasPressed ) return;
if (e.keyCode == 116) {
window.location.href = '/index.html';
wasPressed = true;
}else {
alert("Window closed");
}
}
In JavaScript, I hold two keys down, and keydown is fired perfectly. When I release one of the keys, keyupis fired. So far so good. But I am still holding one key down, so why arent keydown fired? I need this to happen in my game. Am I doing something wrong? Is this the expected response? Is there a work around or something?
window.addEventListener("keydown",
function (e) {
console.log('down');
}, false);
window.addEventListener('keyup',
function (e) {
console.log('up');
}, false);
Looks to me like you're trying to do something like this:
var down = false;
var up = false;
document.body.addEventListener('keydown', function (e) {
if(e.which === 40) {
down = true;
}
if(e.which === 38) {
up = true;
}
});
document.body.addEventListener('keyup', function (e) {
if(e.which === 40) {
down = false;
}
if(e.which === 38) {
up = false;
}
// logic here for one but not the other
if(down && !up) {
alert('down but not up!');
}
});
I have this jquery code to handle some cases if user clicked right or left button but the navigate became a mess when the user click both buttons together
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode == 37) {
setTimeout(LeftKeyPressed(),5000);
}
else if(e.keyCode == 39){
setTimeout(RightKeyPressed(),5000);
}
});
});
I want to simply block any call till the first or second function completely executed
Use a flag to block the unnecessary function calls like this,
$(document).ready(function(){
var xKeyPressed = false;
$(document).keydown(function(e){
if (e.keyCode == 37 && !xKeyPressed) {
setTimeout(LeftKeyPressed(),5000);
}
else if(e.keyCode == 39 !xKeyPressed){
setTimeout(RightKeyPressed(),5000);
}
});
function LeftKeyPressed()
{
xKeyPressed = true;
//Your code
xKeyPressed = false;
}
function RightKeyPressed(){
xKeyPressed = true;
//Your code
xKeyPressed = false;
}
});
Set a simple check if your code is running LeftKeyPressed or RightKeyPressed like this:
var inFunction = false;
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode == 37 && !inFunction) {
inFunction = true;
setTimeout(LeftKeyPressed(),5000);
}
else if(e.keyCode == 39 && !inFunction){
inFunction = true;
setTimeout(RightKeyPressed(),5000);
}
});
});
//Add this in your functions, both Left and Right variants,
function LeftKeyPressed(){
//Do your normal stuff here
inFunction = false;
}
There is other ways of doing this as well, but this is in my opinion a clear and concise way of doing it. You can potentially get race conditions with this approach.
$(document).ready(function(){
var navt;
$(document).keydown(function(e){
if(navt != null) return;
if (e.keyCode == 37) {
navt = setTimeout(function(){ LeftKeyPressed(); navt = null; },5000);
}
else if(e.keyCode == 39){
navt = setTimeout(function(){ RightKeyPressed(); navt = null; },5000);
}
});
});