Show gif while clicking in a key - javascript

Hello I want to make a gif appear while I m clicking in Ctrl key but when I stop I want to show an image.
My code make the gif appear when I click Ctrl but if I stop the gif keeps.
CODE:
document.addEventListener('keydown', function(event) {
if(event.keyCode == 17) {
document.getElementById("key").innerHTML = "<img src=\"stick.gif\">";
shoot -= 1;
document.getElementById("shoot").innerHTML = shoot;
}
}

Try this.I have made a key-up event that replaces the GIF when the key is not pressed.You can make this react specifically to the Ctrl key as well.I have added the two ID tags for elements, since you had not attached any HTML elements.
As the comment above mentioned, you need a Keyup function to handle the event when the key is not pressed.
<script>document.addEventListener('keydown', function(event) {
console.log("Event");
if(event.keyCode == 17) {
console.log("Key Pressed");
document.getElementById("key").innerHTML = "<img src=\"stick.gif\">";
shoot -= 1;
document.getElementById("shoot").innerHTML = shoot;
}
});
document.addEventListener('keyup', function(event) {
document.getElementById("key").innerHTML = "This key is up"
});
</script>
<p id="key">Hello</p>
<p id="shoot">Shot</p>

Related

To open a new web page after pressing the enter key 3 times

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.

is there a function to do on a specific keypress instead of click

i was wondering if there is a function i could use instead of using a mouse click as i have set keybinds to whenever i press it it does it on my pc , here is my code i am using for a broswer script on tampermonkey,
}
$('.pagination.prev').on('click' , function(e){
e.preventDefault();
setTimeout(function(){
getPlayerDataFromSite();
}, 500);
});
$('.pagination.next').on('click' , function(e){
e.preventDefault();
setTimeout(function(){
getPlayerDataFromSite();
}, 500);
});
}
instead of using mouse click on the next button and previous button i would like it to use b key as previous and n key as next
thanks in advance for help really appriciate it
Handling a 'keydown' event is rather simple.
You simply listen for the event, then check for the key you are interested in.
For example, this code listens for the keys "b" and "n":
const pre = document.querySelector('pre');
pre.innerText = "";
window.addEventListener('keydown', event => {
// console.log('keydown event:', event);
pre.innerText += `keydown event.key: "${event.key}"\n`;
if (event.key === 'b') {
alert('You pressed "b"');
} else if (event.key === 'n') {
alert('You pressed "n"');
}
});
document.querySelector('button').onclick = () => {pre.innerText = ""};
<h4>Logging 'keydown' Events</h4>
<button>Clear Log</button>
<pre></pre>
Consideratons
As Stephen P mentions, there are some things to be aware of when using 'keydown' events:
holding a key sends repeated keydown events
non-printing keys such as Shift and Control send keydown events
Shift+N produces uppercase N, not lowercase 'n'

Using shift with left click for event without jQuery

My goal is to press a button and perform an action only when the shift key is also pressed. However, it doesn't even seem to recognize the shift key right now. Currently it works with only the right click but like I said, I want it to work with right click + shift.
button.addEventListener("oncontextmenu", function(e) {
document.addEventListener("keydown", function(e) {
console.log("this string won't show");
if (e.keyCode == 16) {
console.log("this string won't show either");
} else {
console.log(e.keyCode); // again it won't show
}
});
rightShiftClick(e); // this will execute perfectly.
});
The event object tells you if the shift key is pressed and there is no "on" when you are attaching the event.
button.addEventListener("contextmenu", function(e) {
console.log(e.shiftKey);
});

How to have an event trigger every time a user presses a key in javascript

First of all, I'm new to Javascript. I would like to have an event repeat itself every time a user presses a key in Javascript. See the sample code below:
<script>
document.addEventListener('keydown', function(event){
if(event.keyCode == 39) {
document.write('Right was pressed');
}
})
</script>
When this code is run and the right arrow key is pressed, the statement is only printed once. I would like to have the event register multiple times, as many times as the user presses the key. Any suggestions?
The event is fired every time you press the key (and repeated if you hold the key down), but document.write() will every time override the content so it looks like nothing change, you could use innerHTML instead (just to see the effect) :
document.addEventListener('keydown', function(event){
if(event.keyCode == 39) {
//Not recommended as 'T.J. Crowder' mentioned in the comment
document.body.innerHTML += 'Right was pressed <br>';
}
})
You could use console.log() to debug and make sure the event was invoked :
document.addEventListener('keydown', function(event){
if(event.keyCode == 39) {
console.log('Right was pressed');
}
})
Actually it indeed triggered multiple times. The problem is document.write would clear the DOM.
This example works well for me.
script:
var counter = 0;
document.addEventListener('keydown', function(event){
if(event.keyCode == 39){
++counter;
document.getElementById("demo").innerHTML = "Key downed " + counter;
}
});
html:
<p id="demo">
</p>

Use a preventdefault to get out of the loop after pressing Enter key

This is a complete revision of my initial question, all unnecessary resources and references were deleted
I am tying the same event listener to 2 different elements: a button and Enter key, and it looks like the following:
var funcelement = function(){
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click');
}
})
What I am trying to do is to prevent propagation of the enter key press if focus is on the submit button(#buttonID) by using preventDefault().
So I tried various combinations to make it work. The following is the latest result on my attempts
$('#inputID').keyup(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})
After I enter a text into an input box and press Enter key, a confirmation window with yes/cancel buttons pops up with focus on yes button. Once I press Enter again, another window confirming that changes were made pops up with Ok button focused on it. Once I press Enter again, everything I need is being made.
However, there is one problem: after the last step is done, I am going back to the if (!hasfocus) line.
How do I prevent that from happening? Once the stuff I need is done - I don't want to go into that line again.
You can pass a parameter to into the function and stop the propagation there like so:
var funcelement = function(event, wasTriggeredByEnterKey){
if (wasTriggeredByEnterKey && $('#buttonID').is(':focus')) {
event.stopPropagation;
}
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click', [true]);
}
}
)
UPDATE
In order to answer your revised issue, you should use the "keydown" event rather than "keyup" when working with alerts. This is because alerts close with the "keydown" event but then you are still triggering the "keyup" event when you release the enter key. Simply change the one word like this:
$('#inputID').keydown(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})

Categories

Resources