Develop Reference

Event Handling in Javascript using buttons

I have two functions that have if statements inside them. I am trying to choose which function to run based off which keys are pressed. When ran the keys without shift override the shift if statements. I am sure to solve this an event handler should be used. However I am not sure where to even start. If the standard ifs are taken out the shift if statements work and vice versa.
Individually each function works as intended. I have looked into adding an event handler based off what is pressed which function overrides which. I have looked at Event Handing and not really sure where to begin.
var map = {};
onkeydown = onkeyup = function(e){
e = e || event; //deals with IE Compatibility
map[e.key] = e.type == 'keydown';
}
I have an array that maps the keys that are pressed since there are more than one key that can be pressed at a specific time.
document.onkeydown = function (e){
if(e.which == 16 && e.which == 117){ //ShiftF6
try {
document.querySelectorAll("input[value=Close]")[0].click();
console.log("Button clicked.");
} catch(ex) {
};
try {
// eslint-disable-line prefer-template
document.querySelectorAll("textarea[name=bugnote_text]")[0].value = //display text
document.querySelectorAll("input[value='Close Ticket']")[0].click();
console.log("Button clicked.");
} catch(ex) {
};
}
This is an example of what is being done with shift and a simple function key.
document.onkeydown = function(zEvent){
if(zEvent.which == 117){ //F6
try {
document.querySelectorAll("input[value=Close]")[0].click();
console.log("Button clicked.");
} catch(ex) {
};
try {
// eslint-disable-line prefer-template
document.querySelectorAll("textarea[name=bugnote_text]")[0].value = //Display text;
document.querySelectorAll("input[value='Close Ticket']")[0].click();
console.log("Button clicked.");
} catch(ex) {
};
}
This is just a single button press.
Note there are multiple if statements inside each function no more than 5 in each however. I know placing these statements in a switch or array would probably be cleaner. I am trying to just decide which function to work out of depending which buttons are being pressed. I am not sure where to begin to get it to choose which way to go.

Qualtrics: using space bar to continue, study autoadvancing on next item if item left unanswered before space bar press

I'm very new to JavaScript, and I'm currently trying to add a custom code to my Qualtrics survey that makes it so pressing the spacebar continues the survey in the "Text/Graphic" question type. I have a code that should be working; however, I'm getting an "Unexpected token (" error.
Here is the code:
Qualtrics.SurveyEngine.addOnload(function()
{
document.addEventListener("keydown", function(e) {
if (e.keyCode === 32) {
function(){
that.clickNextButton();
}
}
}
});`
I also found this answer to a similar question from a couple of years back:
Here is a simplified version that works (updated to hide NextButton):
Qualtrics.SurveyEngine.addOnload(function() {
$('NextButton').hide();
document.on("keydown", function(e) {
if (e.keyCode === 13) $('NextButton').click();
});
});
This code, however, doesn't work at all in my survey (as if it wasn't even there).
Any help is much appreciated, thanks in advance!
____ Edit _____
The code I have now used is the following:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
Qualtrics.SurveyEngine.addOnReady(function() {
$('NextButton').hide();
document.on("keydown", function(e) {
if (e.keyCode === 32) $('NextButton').click();
});
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
The problem I have now is that the study autoadvances the next question whenever I press spacebar before ansewring a previous question.
Example
Question 1: Is the sentence you just saw a sensible continuation for the preceding sentence?
* participant presses space bar before answering the question with F for no and J for yes
* The study reminds the participant that they need to answer the question before proceeding to the next question
* Participant answers the question and the study automatically proceeds to the next question, because answering validates the question
--> the study only lets the participant see the next item for a second, and then autoadvances to the next item without the participant pressing any key.
The code I use for the F + J keys is the following:
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
this.hidePreviousButton();
var that = this;
Event.observe(document, 'keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 74: // 'f' was pressed
choiceID = 2;
break;
case 70: // 'j' was pressed
choiceID = 1;
break;
}
if (choiceID) {
Event.stopObserving(document, 'keydown', keydownCallback);
that.setChoiceValue(choiceID, true);
that.clickNextButton();
}
});
});

I think it doesn't work due to a timing issue. Use addOnReady instead:
Qualtrics.SurveyEngine.addOnReady(function() {
$('NextButton').hide();
document.on("keydown", function(e) {
if (e.keyCode === 32) $('NextButton').click();
});
});
Note: with split screen preview mode you have to click in the window first or it won't recognize the key press.
EDIT:
I couldn't recreate your problem (your code worked as is for me when I tried it). However, try the following. It is cleaner and consistent. If it works be sure to accept the answer.
Space bar question:
Qualtrics.SurveyEngine.addOnReady(function() {
$('NextButton').hide();
if($('PreviousButton')) $('PreviousButton').hide();
var evt = document.on('keydown', function(e) {
if (e.which == 32) { //space bar pressed
evt.stop();
$('NextButton').click();
}
});
});
Yes/No question:
Qualtrics.SurveyEngine.addOnReady(function() {
$('NextButton').hide();
if($('PreviousButton')) $('PreviousButton').hide();
var that = this;
var evt = document.on('keydown', function(e) {
var choiceID = null;
if(e.which == 70) choiceID = 1; //'f' was pressed
else if(e.which == 74) choiceID = 2; //'j' was pressed
if (choiceID) {
evt.stop();
that.setChoiceValue(choiceID, true);
$('NextButton').click();
}
});
});

You need to remove the function() around that.clicknextbutton(), and change that to this. that doesn't make sense unless it is a variable set to the this keyword. The function(){} syntax is used to define an expression in a parameter.
Qualtrics.SurveyEngine.addOnload(function(){
document.addEventListener("keydown", function(e) {
if (e.keyCode === 32) {
this.clickNextButton();
}
});
});

Javascript ALT click on link opens alternative link

I want to be able to open an alternate link when I click by holding down the alt button. I've tried some solutions but they seem to have weird problems. All I want is when clicking to detect if the alt key is held down
function selectlink(selection,alt) {
if (alt key is pressed) {
window.open(alt,'_blank');
} else {
window.open(selection,'_blank');
}
In the body:
Click
Preferably WITHOUT Jquery.

You have to reference the event as a parameter, this will make it possible to check if a key was pressed during the click.
function selectlink(selection, alt, e) {
if (e.altKey) {
alert(alt);
} else {
alert(selection);
}
}
Click
With a little bit of rewriting you can make the link a bit smarter and still have functioning links when javascript is disabled.
function selectLink(e) {
var el = e.target;
if (e.altKey) {
window.open(el.getAttribute("alternative"), '_blank');
e.preventDefault();
}
}
Click

Here's a solution using jQuery. I'll write a solution using pure JS in my lunch break.
https://jsfiddle.net/jotq0atz/2/
X
Here is the js:
$("#x").on('click', function(e){
link = $(e.currentTarget).attr('href');
alt_link = $(e.currentTarget).attr('data-alt-href');
if(e.altKey){
alert("alt was held while clicking");
window.open(alt_link, '_blank');
} else {
alert("alt wasn't held while clicking");
window.open(link, '_blank');
}
});

Here's a solution made by adapting the answer provided in javascript alt key
var altdown = false;
document.onkeydown = KeyCheck;
document.onkeyup = KeyCheck;
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 18:
document.Form1.KeyName.value = "Alt";
if(e.type == "keydown"){
altdown = true;
}
else if(e.type == "keyup"){
altdown = false;
}
break;
}
}
function selectlink(selection,alt) {
if (altdown) {
window.open(alt,'_blank');
} else {
window.open(selection,'_blank');
}
}
The link opened in dependent on the altdown variable which is true when the alt key is pressed down. A working fiddle can be seen here. https://jsfiddle.net/q5kr9h2o/7/

Set Controls not working for one object instance but works for other

I'm trying to create a Multi-player game using JS.
function EvilBall(player,color)
{
EvilCircle.call(this,this.size,this.velY,this.velX);
this.color=color;
this.score =0;
this.player=player;
}
EvilBall.prototype=Object.create(EvilCircle.prototype);
EvilBall.prototype.constructor =EvilBall;
EvilBall.prototype.setControls=function(left,right,down,up){
var _this = this;
window.onkeydown = function(e) {
console.log(e.keyCode);
if (e.keyCode === left) {
_this.x -= _this.velX;
} else if (e.keyCode === right) {
_this.x += _this.velX;
} else if (e.keyCode === down) {
_this.y -= _this.velY;
} else if (e.keyCode === up) {
_this.y += _this.velY;
}
}
}
after this I'm creating two instances of EvilBall and setting there controls using setControls function which has event handler function inside.
var evilBall = new EvilBall('p1','white');
var evilBall2 = new EvilBall('p2','yellow');
evilBall2.setControls(65,68,87,83);
evilBall.setControls(37,39,38,40);
Only evilBall instance with key 37,39,38 and 40 is working when keys are pressed. I have figured that since evilBall is mentioned below evilBall2, it is working fine. If an event handler is working fine on one instance, why is not working on the other?
How can we develop multi-player games in JS when event-handler on only one instance works?
Can anyone please explain this to me. Am I missing something here?

Window onkeydown is a property:
window.onkeydown = ()=>alert("one");
window.onkeydown = ()=>alert("two");//will override the first
window.onkeydown();
So use window.addEventListner instead:
window.addEventListener("keydown",function(event){
...
});
Overall it might be better to just have one event listener:
var keylisteners=[];
window.onkeydown=function(e){
(keylisteners.find(el=>el.key==e.keyCode)||{callback:function(){}}).callback();
};
Use like this:
keylisteners.push({
key:42,
callback:function(){}
});
By the way, your shape function doesnt take arguments:
Shape.call(this); //will do the job too

made a function but it's not working

I have no idea why this is not working....
var changeIdValue = function(id, value) {
document.getElementById(id).style.height = value;
};
document.body.onkeydown = function(e){
if(e.keyCode == 40){
document.getElementById("balklongwaarde").addEventListener("onkeydown", function(){
changeIdValue("balklongwaarde", "60px")});
}
}
Can anybody help me why this is not working......
When I delete the code of the on keydown then the animation works without problems.
But I want that code executed after press on key down......