When I click the Space button (break), it only plays video. It's not stopping with Space.
I don't know what the problem is.
document.addEventListener("keydown", (e) => {
const tagName = document.activeElement.tagName.toLowerCase();
if (tagName === "input") return;
switch (e.key.toLowerCase()) {
case " ":
if (tagName === "button") return;
case "k":
playVideo();
break;
}
});
// Play video function
function playVideo() {
play_pause.innerHTML = "pause";
play_pause.title = "pause";
video_player.classList.add("paused");
mainVideo.play();
}
// Pause video function
function pauseVideo() {
play_pause.innerHTML = "play_arrow";
play_pause.title = "play";
video_player.classList.remove("paused");
mainVideo.pause();
}
play_pause.addEventListener("click", () => {
const isVideoPaused = video_player.classList.contains("paused");
isVideoPaused ? pauseVideo() : playVideo();
});
mainVideo.addEventListener("play", () => {
playVideo();
});
let state = true;
switch (e.key.toLowerCase()) {
case e.keyKode == 32:
if(state == true){
playVideo();
state = false;
} else {
pauseVideo();
state = true;
}
break;
}
}
Try this out for space.
There is correct answer if someones need.
case e.keyCode == 32:
if (mainVideo.paused) {
mainVideo.play();
} else {
mainVideo.pause();
}
break;
Related
I have followed this link https://codesandbox.io/s/25777826onclick-works-but-ondoubleclick-is-ignored-on-react-component-ul6f5?file=/src/App.tsx to create a double-click event. This is simple and works. But if I use this method modification to my code is not working.
This one is a sample double-click function:
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
switch (e.detail) {
case 1:
console.log("click");
break;
case 2:
console.log("double click");
break;
case 3:
console.log("triple click");
break;
}
};
<div className="App">
<button onClick={handleClick}>Click me</button>
</div>
This is my original code:
const popUpHandler = e => {
console.log('popUpHandler', e);
if (e.type === 'Editor') {
e.cancel = true;
if (e.data.Id !== undefined) {
getApptDetail(e.data.Id).then(response => {
const doctorFromDb = response.data.doctor;
if (doctorFromDb.includes('|')) {
setStringOfDoctor(doctorFromDb.split('|'));
} else {
setStringOfDoctor([doctorFromDb]);
}
setAppt(response.data);
});
setOpenUpdatePopup(true);
} else if (e.data.StartTime !== undefined) {
setStringOfDoctor([]);
setStartTime(e.data.StartTime);
setDoctorName(e.data.Doctor);
setOpenPopup(true);
}
}
if (e.type === 'DeleteAlert') {
e.cancel = true;
if (e.data.Id !== undefined) {
getApptDetail(e.data.Id).then(response => {
setAppt(response.data);
});
setOpenDeletePopup(true);
}
}
if (e.type === 'QuickInfo' && e.target.classList[0] === 'e-work-cells') {
e.cancel = true;
if (e.data.StartTime !== undefined) {
setStringOfDoctor([]);
setStartTime(e.data.StartTime);
setDoctorName(e.data.Doctor);
setOpenPopup(true);
}
}
};
This one is after modification to my code, but is not working:
const popUpHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
switch (e.detail) {
case 1:
console.log('Nothing');
break;
case 2:
if (e.type === 'Editor') {
e.cancel = true;
if (e.data.Id !== undefined) {
getApptDetail(e.data.Id).then(response => {
const doctorFromDb = response.data.doctor;
if (doctorFromDb.includes('|')) {
setStringOfDoctor(doctorFromDb.split('|'));
} else {
setStringOfDoctor([doctorFromDb]);
}
setAppt(response.data);
});
setOpenUpdatePopup(true);
} else if (e.data.StartTime !== undefined) {
setStringOfDoctor([]);
setStartTime(e.data.StartTime);
setDoctorName(e.data.Doctor);
setOpenPopup(true);
}
}
if (e.type === 'DeleteAlert') {
e.cancel = true;
if (e.data.Id !== undefined) {
getApptDetail(e.data.Id).then(response => {
setAppt(response.data);
});
setOpenDeletePopup(true);
}
}
if (e.type === 'QuickInfo' && e.target.classList[0] === 'e-work-cells') {
e.cancel = true;
if (e.data.StartTime !== undefined) {
setStringOfDoctor([]);
setStartTime(e.data.StartTime);
setDoctorName(e.data.Doctor);
setOpenPopup(true);
}
}
}
};
Hope someone can guide me on how to modify my original code and make it double-click (case 2 is double click). Thank you.
I'm learning JavaScript, and I've done this code, I just want to be sure that I'm on the right way, would you have done it differently?
What bothers me is especially to have passed parameters to the functions "next" and "updateArrows" to know the origin of the clicks
const changeStep = document.querySelectorAll(".step");
const currentPaginate = document.querySelector(".pagination span.active");
const arrows = document.querySelectorAll(".arrow");
for (let arrow of arrows) {
arrow.addEventListener("click", function () {
updateArrows(arrow);
});
}
for (let step of changeStep) {
step.addEventListener("click", function () {
next(step);
});
}
function updateArrows(arrow, currentStep = null, update = true) {
let nextStep;
if (currentStep == null) {
currentStep = document.querySelector(".step.current");
if (arrow.classList.contains("arrow-bottom")) {
nextStep = currentStep.nextElementSibling;
} else {
nextStep = currentStep.previousElementSibling;
}
} else nextStep = document.querySelector(".step.current");
if (!arrow.classList.contains("impossible")) {
if (nextStep.dataset.id != 1 && nextStep.dataset.id != 5) {
arrows.forEach(function (arrow) {
if (arrow.classList.contains("impossible")) {
arrow.classList.remove("impossible");
}
});
} else if (nextStep.dataset.id == 5) {
if (arrow.previousElementSibling.classList.contains("impossible"))
arrow.previousElementSibling.classList.remove("impossible");
arrow.classList.add("impossible");
} else if (nextStep.dataset.id == 1) {
if (arrow.nextElementSibling.classList.contains("impossible"))
arrow.nextElementSibling.classList.remove("impossible");
arrow.classList.add("impossible");
}
if (update == true) next(nextStep, false);
}
}
function next(step, update = true) {
if (!step.classList.contains("current")) {
const currentStep = document.querySelector(".step.current");
const nextStep = step.dataset.id;
currentStep.classList.remove("current");
step.classList.add("current");
currentPaginate.textContent = "0" + nextStep;
let arrow;
if (currentStep.dataset.id < nextStep) {
arrow = document.querySelector(".arrow-bottom");
} else {
arrow = document.querySelector(".arrow-top");
}
if (update == true) updateArrows(arrow, currentStep, false);
}
}
I see what you mean.
Yes you are right. You can do it better...
Instead of passing the parameter arrow you can read from an event object
const changeStep = document.querySelectorAll(".step");
const currentPaginate = document.querySelector(".pagination span.active");
const arrows = document.querySelectorAll(".arrow");
for (let arrow of arrows) arrow.addEventListener("click", updateArrows);
for (let step of changeStep) step.addEventListener("click", next);
function updateArrows(e, currentStep = null, update = true) {
let arrow = null
e.target ? arrow=e.target : arrow=e
let nextStep;
if (currentStep == null) {
currentStep = document.querySelector(".step.current");
if (arrow.classList.contains("arrow-bottom")) {
nextStep = currentStep.nextElementSibling;
} else {
nextStep = currentStep.previousElementSibling;
}
} else nextStep = document.querySelector(".step.current");
if (!arrow.classList.contains("impossible")) {
if (nextStep.dataset.id != 1 && nextStep.dataset.id != 5) {
arrows.forEach(function (arrow) {
if (arrow.classList.contains("impossible")) {
arrow.classList.remove("impossible");
}
});
} else if (nextStep.dataset.id == 5) {
if (arrow.previousElementSibling.classList.contains("impossible"))
arrow.previousElementSibling.classList.remove("impossible");
arrow.classList.add("impossible");
} else if (nextStep.dataset.id == 1) {
if (arrow.nextElementSibling.classList.contains("impossible"))
arrow.nextElementSibling.classList.remove("impossible");
arrow.classList.add("impossible");
}
if (update == true) next(nextStep, false);
}
}
function next(e, update = true) {
let step = null
e.target ? step = e.target : step=e
if (!step.classList.contains("current")) {
const currentStep = document.querySelector(".step.current");
const nextStep = step.dataset.id;
currentStep.classList.remove("current");
step.classList.add("current");
currentPaginate.textContent = "0" + nextStep;
let arrow;
if (currentStep.dataset.id < nextStep) {
arrow = document.querySelector(".arrow-bottom");
} else {
arrow = document.querySelector(".arrow-top");
}
if (update == true) updateArrows(arrow, currentStep, false);
}
}
This should work, if not please contact me beforehand.
While activating the eventListener an event object is passed to function and e.target is an element which was clicked in this case.
What I did was crucial because you sometimes call this function from an eventListener and sometimes from a code. If the element has e.target then it's from an eventListener and if not then it's from code.
Didn't have a chance to test it since I don't have the rest of the code. Let me know if it works.
I am trying to prevent specific buttons from continuously firing but have had no luck with any of my methods. I've tried several suggestions/answers from other stackoverflow posts but none have worked. I currently have a controller and for my left/right buttons I don't care if they repeat but for my jump button I do not want to be able to hold the button and have the character keep jumping. The closest I got to making this work was by using a Map and setting the button to it but unfortunately on keyup the character would also jump. Here is my current code:
class Controller {
constructor() {
this.left = false;
this.up = false;
this.right = false;
this.down = false;
this.pressed = {};
let keyDown = (e) => {
if (e.code == 'ArrowLeft') this.left = true;
if (e.code == 'ArrowRight') this.right = true;
if (e.code == 'ArrowDown') this.down = true;
if (e.code === 'ArrowUp') {
if (this.pressed[e.code] === false) { return }
else {
this.pressed[e.code] = false;
this.up = true;
}
}
}
let keyUp = (e) => {
if (e.code == 'ArrowLeft') this.left = false;
if (e.code == 'ArrowRight') this.right = false;
if (e.code == 'ArrowDown') this.down = false;
if (e.code === 'ArrowUp') {
this.pressed[e.code] = true;
this.up = false;
}
}
window.addEventListener('keydown', keyDown);
window.addEventListener('keyup', keyUp);
}
}
let controller = new Controller();
and some alternates that I've tried also
this.pressed = false;
let keyDown = (e) => {
if (e.code == 'ArrowLeft') this.left = true;
if (e.code == 'ArrowRight') this.right = true;
if (e.code == 'ArrowDown') this.down = true;
console.log(controller.pressed)
if (e.code === 'ArrowUp') {
if (!this.pressed) { return }
this.pressed = false;
this.up = true;
}
}
let keyUp = (e) => {
if (e.code == 'ArrowLeft') this.left = false;
if (e.code == 'ArrowRight') this.right = false;
if (e.code == 'ArrowDown') this.down = false;
if (e.code === 'ArrowUp') {
this.pressed = true;
this.up = false;
}
}
this.pressed = false;
let keyDown = (e) => {
if (e.code == 'ArrowLeft') this.left = true;
if (e.code == 'ArrowRight') this.right = true;
if (e.code == 'ArrowDown') this.down = true;
if (!this.pressed) {
this.pressed = true;
if (e.code == 'ArrowUp') {
this.up = true;
}
}
}
let keyUp = (e) => {
if (e.code == 'ArrowLeft') this.left = false;
if (e.code == 'ArrowRight') this.right = false;
if (e.code == 'ArrowDown') this.down = false;
if (e.code == 'ArrowUp') {
this.pressed = false;
this.up = false;
}
}
Logically I feel as though these should work but they don't. And in case it matters my character jumps based on this
if (controller.up && !this.jumping) {this.vy -= this.speed * 60; this.jumping = true;}
I've probably tried doing this at least 10 different ways and the closest I got was my character jumped twice before stopping (while holding arrowup).
EDIT: this gives 2 jumps then stops. Can anyone explain why he jumps twice before stopping?
this.keySet = new Set();
let keyDown = (e) => {
if (e.code == 'ArrowUp') {
if (this.keySet.has(e.code)) { this.up = false }
else { this.keySet.add(e.code); this.up = 'keydown' === e.type }
}
}
let keyUp = (e) => {
if (e.code == 'ArrowUp') { this.keySet.delete(e.code); this.up = false }
}
You can throttle the function
The way throttling works is when you call a function, it will execute the function like normal, but on subsequent calls it won't run again until enough time has passed since the last attempted execution.
Lodash has an implementation, but you can find versions of this all over the internet: https://lodash.com/docs/4.17.15#throttle
I am trying to create a function that will call another function (passed as a parameter) if all the required keys are pressed. This is what I have so far:
function multiKeyPress(funcName, parms, key0, key1, key2, key3, key4, key5) {
var down = [];
var noKeys = arguments.length - 2
var args = parms
// for (i = 0; i < noKeys; i++) {
// if (i == noKeys - 1) {
// keyPress += ('down[key' + i + '])')
// } else {
// keyPress += ('down[key' + i + '] && ')
// }
// }
console.log(noKeys)
console.log(args);
switch (noKeys) {
case 1:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 2:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 3:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 4:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 5:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3] && down[key4]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
case 6:
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
if (down[key0] && down[key1] && down[key2] && down[key3] && down[key4] && down[key5]) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
break;
}
}
Near the top of the function I have commented out a loop that would create a string with the necessary keys but I couldnt pass that as a condition because a string will be a truthy value. Therefore I resorted to a long switch statement. This currently works but I was wondering if there was a way to clean it up or if there are any potential problems.
Thanks
You're on the right track, you just need to think about using arrays.
function multiKeyPress(funcName, parms) {
var keysPressed = Array.prototype.slice.call(arguments, 2);
var down = [];
$(window).keydown(function(e) {
down[e.keyCode] = true;
}).keyup(function(e) {
var allPressed = keysPressed.every(function (key) {
return down[key];
});
if (allPressed) {
funcName.apply(this, args);
}
down[e.keyCode] = false;
});
}
That gets any number of keys passed into the function by treating the arguments like an array. Then the keyup handler uses the every method of Array to make sure all of the entries in the array have been pressed.
I should warn you I haven't tested this in a working application, since none was provided, but I'm pretty sure it will function as a replacement.
If you want help with sorting out this string you talk about in the question, do include it in the question, or add a new question specifically about that code.
I have a piece of code here and I want to be able to press a key (f.i. the "1" key) so var isRunning = false. When I press another key (f.i. the "2" key) var isRunning should change back to isRunning = true.
It needs to be as simple as possible (javascript/html), no jquery. I just want to alter the value of this var with a definable keystroke.
This is the code:
<script type="text/javascript">
var pages=[];
pages[0]="page0.html"
pages[1]="page1.html"
pages[2]="page2.html"
var time = 33000;
var currentIndex = 0;
var isRunning = true;
function pageChange() {
if(isRunning){
if(currentIndex == 0){
pages = shuffle(pages);
console.log(pages);
currentIndex = pages.length;
}
currentIndex--;
document.getElementById("frame").src=pages[currentIndex];
console.log(currentIndex);
}
setTimeout(function() { pageChange(); }, time);
};
window.onload = function(){
pageChange();
}
</script>
This Should do the trick ;)
document.addEventListener('keydown', function(event) {
if(event.keyCode == 49) { //keycode 49 is '1'
isRunning = false;
}
else if(event.keyCode == 50) { //keycode 50 is '2'
isRunning = true;
}
});
Since your isRunning is in global scope, you can just catch a keydown event for the number keys. For example if you want to catch the event on the whole page, go like this:
window.onkeydown = function(e){
switch(e.keyCode){
case 49:
case 97:
isRunning = false;
break;
case 50:
case 98:
isRunning = true;
break;
}
}