Несколько событий keyup в одном JS FILE

У меня есть файл JS для моей веб-страницы HTML. Я хочу проверить 4 вещи. Если они нажимают число, 1-4 на клавиатуре, они переводят их на указанный URL-адрес. Скрипт работает, но только если он у меня есть.

Когда я помещаю все 4 события в файл js, работает только последнее/самое последнее. Есть ли какой-то синтаксис, который я делаю неправильно, что мешает им всем 4 работать?

Для дальнейшего объяснения с помощью этого кода выполняется только эта часть сценария:

//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";

JS:

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
}
//If they hit keypad number 2
document.body.onkeyup = function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
}
//If they hit keypad number 3
document.body.onkeyup = function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
}
//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

ОТВЕТЫ

Ответ 1

Если вы включите все свои условия в одну и ту же функцию, она будет работать отлично. В противном случае вы будете перезаписывать свою функцию каждый раз. Вот почему у вас возникла проблема, когда единственным событием было последнее. Последнее, попробуйте использовать if и then else if. В противном случае вы будете проверять каждое условие каждый раз без причины.

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
    else if(e.keyCode == 50){
        window.location.href = "foo";
    }
    else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
    else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Ответ 2

Такое поведение можно объяснить следующим образом. То, что вы пытались сделать, - назначить функцию событию onkeyup. Это происходит так же, как при работе с переменными. Пусть говорят

var key = 1;

является "сокращенным" кодом для

document.body.onkeyup = function(e){
  // action for keypad 1
}

то при назначении другой функции обработки событий вашему onkeyup, вы делаете

key = 2;

Задайте себе вопрос: держит ли key переменной 1? Нет. Это переписывается приведенным выше утверждением. Теперь key удерживает 2. 1 "потерян". Именно по этой причине выполняется только последний обработчик событий (для клавиатуры 4). Последнее назначение перезаписало предыдущее задание.

Чтобы обойти это, у вас есть два варианта:

  1. группировать действия события в одну функцию
  2. использовать EventTarget.addEventListener

С помощью опции 1 вы можете группировать свои действия в одной функции, например, в интерактивном примере ниже:

// input acts as your document.body
const inp = document.getElementById('foo');

inp.onkeyup = function(e) {
  if(e.keyCode == 49) {
    console.log('pressed keyCode 49'); // press 1
  }
  else if(e.keyCode == 50) {
    console.log('pressed keyCode 50'); // press 2
  }
  else if(e.keyCode == 51) {
    console.log('pressed keyCode 51'); // press 3
  }
  else if(e.keyCode == 52) {
    console.log('pressed keyCode 52'); // press 4
  }
};
<input id="foo" type="text" placeholder="type something">

Ответ 3

Привет и приветствуем StackOverflow;)

Вы регистрируете новый прослушиватель событий onkeyup каждый раз. Попробуйте поместить все утверждения if в один из слушателей следующим образом:

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
     if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Надеюсь, это поможет.

Ответ 4

Большинство людей ответит, однако, будет работать, чтобы просто избегать дублирования кода и тирады инструкций "IF", я бы просто использовал оператор switch:

document.body.onkeyup = function(e){
    switch(e.keyCode) {
        case 49:
            window.location.href = "http://localhost:1337/trail";
            break;
        case 50:
            window.location.href = "foo";
            break;
        case 51:
            window.location.href = "http://localhost:1337/topten";
            break;
        case 52:
            window.location.href = "foo";
            break;
    }
}

Ответ 5

Вы переопределяете обработчик событий, вам нужно иметь одну функцию. попробуйте эту опцию:

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    } else if(e.keyCode == 50){
        window.location.href = "foo";
    } else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    } else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Или вы можете использовать переключатель вместо этого.

Ответ 6

Да, есть альтернативный синтаксис, который позволяет добавлять несколько обработчиков событий к одному и тому же объекту без переопределения друг друга.

addEventListener('keyup', functionHere );

/*
// This will work without overriding other functions...
//If they hit keypad number 1
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
});
//If they hit keypad number 2
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
});
//If they hit keypad number 3
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
});
//If they hit keypad number 4
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
});
*/

// It may be best to combine them all even when using this method...
document.body.addEventListener("keyup", function(e) {
  //If they hit keypad number 1
  if (e.keyCode == 49) {
    window.location.href = "http://localhost:1337/trail";
  }
  //If they hit keypad number 2
  if (e.keyCode == 50) {
    window.location.href = "foo";
  }
  //If they hit keypad number 3
  if (e.keyCode == 51) {
    window.location.href = "http://localhost:1337/topten";
  }
  //If they hit keypad number 4
  if (e.keyCode == 52) {
    window.location.href = "foo";
  }
});

Ответ 7

Возможно, добавьте все, if внутри одного прослушивателя событий:

document.body.addEventLister("keydown", function(e) {
    if (e.key == "Digit1") {
        window.location.href = "http://localhost:1337/trail";
    }
    if (e.key == "Digit2") {
        window.location.href = "foo";
    }
     if (e.key == "Digit3") {
        window.location.href = "http://localhost:1337/topten";
    }
    if (e.keyCode == "Digit4") {
        window.location.href = "foo";
    }
}