I have a system where once a certain key is pressed, a Boolean changes to true and the program should trigger an if loop. However, once the key is pressed, the program 'locks up' and is unresponsive. (The program should be automatically moving the paddle, and the whole thing should be able to be turned off, but it seems as though it simply isn't activating.
Here's the offending code:
var aienable = false;
$(document).keydown(function(keyPressed){
if (keyPressed.keyCode == 192 && aienable == false){
aienable = true;
}
});
if (aienable == true){
var AIdrive = setInterval(function(){
$(document).keydown(function(keyPressed){
if (keyPressed.keyCode == 192 && aienable == true){
aienable = false;
}
});
if (aienable == false){
clearInterval(AIdrive);
}
},1000);
}
Note: The key used is `
In Your code
if (aienable == true){
is executed once, just after
var aienable = false;
And the condition is always false.
Changing value of aienable is executed when You press a key.
Secondary if should be inside keydown event handler just after first if
You will have to put the boolean condition code in a function and call it from inside the key down handler. the variable has value true after key pressing but the code is not being notified that as it has already been run.
Related
I need the script for functioning the window.location only after pressing the ENTER key 3 or n times.
This is my current code and i am trying to modify it. Need help, still.
function KeyPress(f) {
var event = window.event? event : f
if (event.keyCode == 13)
window.location = './index.html';
}
document.onkeypress = KeyPress;
Following your instructions, after three press to the key ENTER, it should run the code that will call window.location. In this example, I'm using console.log to prove it is doing what you asking.
Note: When you run it, you need to click with the mouse where it says "Press Enter 3 times.". In this way, the browser will focus on that section. Then, you can press the ENTER key three times.
document.addEventListener("keyup", (e) => enterKeyPressed(e))
let counter = 1;
function enterKeyPressed(event) {
console.log("Key", event.keyCode, " Pressed:", counter);
if (event.keyCode == 13 && counter == 3) {
console.log("Enter key is pressed");
// window.location = "<url you want to go>";
return true;
}
counter++;
return false;
}
Press Enter 3 times.
Check the log.
The code seems to run the if statement even after the condition of started is set to true.
I have tried doing this as well but it still has the same bug.
if (started === false && started !== true)
if (started == false){ /*this always runs even after started is
set to true??? */
//when any key pressed, start the game // exit if statement?
$(document).on("keypress",function(event){
console.log(started + "started inside keydown function");
startGame(); // <-- runs another function that also sets
//started to true
started = true;
});
$("body").on("click",function(){
console.log(started + "inside click function");
checkClicks++;
if(checkClicks > 2){
$("h1").text("Press any KEY first to start the game!");
}
});
}
The solution below for those having similar issues. Turns out callBacks are always called no matter what. Best to put statements inside them.
$(document).ready(function() {
var started = false;
var checkClicks = 0;
/*change h1 to notify player to type a key first*/
//when any key pressed, start the game // exit if statement?
$(document).on("keypress",function(){
if (started == false) {
//console.log(started + "started inside keydown function");
startGame();
started = true;
}
}
);
$("body").on("click",function(){
if(started == false){
//console.log(started + "inside click function");
checkClicks++;
if(checkClicks > 2){
$("h1").text("Press any KEY first to start the game!");
}
}
});
the callback $(document).on("keypress",function(event){ is called on keypress ... every keypress, it's a callback setup to be called on keypress, and it doesn't care about the if condtion outside of the callback, the callback doesn't know about the if statement ... put the if statement inside the callback
$(document).on("keypress",function(event){
if (started == false) {
console.log(started + "started inside keydown function");
startGame();
started = true;
}
});
This is the function I'm using.
function beHonest() {
if (document.getElementById("about").style.opacity = "0") {
document.getElementById("about").style.opacity = "1";
} else {
document.getElementById("about").style.opacity = "0";
}
}
When I press the button, it calls the function. When I press the button a second time, the else statement does not seem to execute. Why is this?
Your test is currently written like an assignation:
if (document.getElementById("about").style.opacity = "0")
You must write:
if (document.getElementById("about").style.opacity == "0")
Well ==
if (document.getElementById("about").style.opacity == "0") {
You are setting the value to 0 and checking the object. It is true so you enter on closure and set to 1
How can I clarify ALT+CTRL and ALTGR key press?
I found this code here as possible solution, but it's doesn't work:
if (event.ctrlKey && event.altKey) {
}
This code is true for alt+ctr and for altGr as well.
I have situation like this: for alt+ctrl+e (for example e, it's no matter) I want one thing and for altGr+e another, how can I do this?
If anyone have some idea, please tell me.
You can detect which key is pressed (from right key or left key) by value of location property in event object. If value of location property is 1 (e.location=1) then left key is pressed. if value is 2 then right key is pressed.
Here I have providing my code for RightAlter+RightCtrl+<any_valid_key>
Check this Example
var isRightAltKey=false;
var isRightCtrlKey=false;
var validKeys=['a','s','d','f','g']; //keep empty array if no need to check key
document.addEventListener("keydown", function(e) {
if(e.key=="Alt"){
// when right Alter pressed make isRightAltKey true
isRightAltKey= (e.location==2);
}
else if(e.key=="Control"){
// when right Control pressed make isRightCtrlKey true,
//if you need any ctrl key pressed then simply set isRightCtrlKey= true;
isRightCtrlKey= (e.location==2);
}
// checking both right key is pressed already or not?
var isRightKeys= isRightAltKey && isRightCtrlKey;
// validate other keys [optional]
var isValidKey=((typeof validKeys === "undefined") || validKeys.length==0 || validKeys.indexOf(e.key.toLowerCase())>=0);
if (isRightKeys && isValidKey){
document.getElementById("detect_key").innerHTML = "RightAlt + RightCtrl + "+e.key;
}
else
{
document.getElementById("detect_key").innerHTML="";
}
}, false);
document.addEventListener("keyup", function(e) {
if(e.key=="Alt"){
// when right Alter released make isRightAltKey false
isRightAltKey= false;
}
else if(e.key=="Control"){
// when right Control released make isRightCtrlKey false
isRightCtrlKey= false;
}
}, false);
<div id="detect_key"></div>
Why attached keyup event listner?
Here we have to detect key location when Ctrl and Alt key is pressed (on keydown event). and we have to store it in flag variable and make it true. when key is released (on keyup event) have to mark as false. Otherwise those flags always remain true. on Next key press it will always true
You can use the location to determined which alt is being pressed.
In order to support Alt+Ctrl we'll save the last location of the pressed Alt.
Location = 1 // Left
Location = 2 // Right
Then, once both Alt and Ctrl are pressed, do your thing. In this example, we'll just write the Alt side in the result div. You can add the "e" pressed condition as well:
if (e.ctrlKey && e.altKey && e.key == "e"){
Example
HTML
<div class="cont">
Click Alt + Ctrl<br /><br />
<div id="res"></div>
</div>
Javascript
var lastAltLocation;
document.addEventListener("keydown", function(e) {
if (e.key == "Alt"){
lastAltLocation = e.location;
}
if (e.ctrlKey && e.altKey){
if (lastAltLocation == 1){
document.getElementById("res").innerHTML = "Left";
}
if (lastAltLocation == 2){
document.getElementById("res").innerHTML = "Right";
}
}
}, false);
Sticking strictly to your question here are the codes for both the required cases:
document.addEventListener ("keydown", function (zEvent) {
if (zEvent.altKey && zEvent.code === "KeyE") {
if(zEvent.ctrlKey) {
//Do Ctrl+Alt+E Stuff Here.
} else {
//Do Alt+E Stuff Here.
}
});
Now breaking down the things going on here. keydown allows you to detect multiple keypresses.
First we check if the Alt and E keys are pressed. If yes, we then go on to check in the Ctrl key is also active and take the appropriate action as needed.
My goal: Press and HOLD space key while an effect occurs (to simulate a fingerprint scan). If user releases key before effect finishes, I want to display a confirm message. The keydown part works fine and proceeds to function "process", but no error message is displayed on keyup if it is released before the effect finishes. This is what I have...
var active = false;
$(document).one("keydown", function(e) {
if ((e.keyCode == 32) && (active == false)) {
active = true;
$(".panel_1").slideDown(5000, function() {
active = false;
$(".panel_1").slideUp(2000, function() {process(); })
});
}
});
$(document).one("keyup",function(e) {
if ((e.keyCode == 32) && (active == true)) {
var r=confirm("Oops! You must HOLD down the space key until scan is complete. Press OK to try again, or Cancel to return to homepage.");
if (r==true) {
reset();
}
else {
window.location.replace("home.html");
}
}
});
Verify that you are releasing the key during the first slideDown animation. According to your code, once it starts to slide up your active gets set to false and then makes it so the keyup event will not trigger.
Also as a side note I'd recommend using triple = in JavaScript.
Your code seems to work here: http://jsfiddle.net/D52eq/ but note that the confirmation message occurs only if the space bar is released during the .slideDown() phase of the effect - you're setting active = false; before the .slideUp() call.
If you want the confirmation if the space bar is released before completion of the entire animation and process() call then try this:
$(document).one("keydown", function(e) {
if ((e.keyCode == 32) && (!active)) {
active = true;
$(".panel_1").slideDown(5000).slideUp(2000, function() {
process();
active = false;
})
}
});
Note that then you can just chain the .slideDown() and .slideUp(), you don't need to supply a callback function to .slideDown(). Also I've replaced active == false with !active.
Demo: http://jsfiddle.net/D52eq/1/