Функция вызова с параметром объекта из другой функции

Question

Моя цель очень проста: я хотел бы перехватить нажатие правой и левой клавиши и, соответственно, выполнить конкретный JavaScript. В частности, у меня есть два IMG элементы в моем HTML, которые в основном левая и правая стрелка, чтобы изменить центральную картину:

<img id="goleft" onclick="changePic(this)" src="x"/> 
<img id="goright" onclick="changePic(this)" src="y" /> 

Функция changePic(this) является, следовательно, захват объекта вызывающего абонента (влево или стрелка вправо) и соответственно. Однако, для целей выборки, скажем здесь, что это будет просто показать в боевой готовности идентификатор объекта:

function changePic(obj) { 
    alert("hello world"); 
    alert(obj.id); 
} 

Все отлично работает до тех пор здесь. В событии click Javascript правильно вызывается. Тем не менее, теперь я реализую систему для захвата ключевых и правых клавиш и выполнения одного и того же действия. Следующая функция будет захватывать любую клавишу-пресс событие:

document.onkeydown = function (evt) { 
    evt = evt || window.event; 
    switch (evt.keyCode) { 
     case 37: 
      leftArrowPressed(); 
      break; 
     case 39: 
      rightArrowPressed(); 
      break; 
    } 
}; 

... и, очевидно, две функции «LeftArrow» и «Rightarrow», подумал я, мог бы просто сделать это:

function leftArrowPressed() { 
    changePic(document.getElementById("goLeft")); 
} 

function rightArrowPressed() { 
    changePic(document.getElementById("goRight")); 
} 

Однако это не работает. Функции leftArrowPressed и rightArrowPressed должным образом вызваны (протестированы с предупреждением), но вызвана функция changePic (потому что я вижу всплывающее предупреждение «привет мир», но он не работает при вызове «obj.id»). Поэтому я считаю, что эта проблема связана с тем, как я передаю объект от вызывающего к функции слушателя: может ли кто-нибудь сказать мне, что я делаю неправильно?

P.s. Я новичок в этом языке, поэтому, пожалуйста, не стесняйтесь отмечать меня тем, что, как я думал, не имеет значения для ответа на вопрос, но на самом деле это не так.

Answer 1

Идентификаторы чувствительны к регистру, ваш идентификатор goleft, но вы пытаетесь найти его с помощью goLeft.

Answer 2

Я собираюсь предложить небольшие изменения в код, который может сделать вашу жизнь проще:

<img id="goleft" onclick="leftArrowPressed()" src="x"/> 
<img id="goright" onclick="rightArrowPressed()" src="x"/> 

Измените changePic() функцию, чтобы взять строку вместо элемента, и это сделает вещи немного легче вы.

Если вы хотите придерживаться вашей текущей реализации: вы используете goLeft в поиске, и это должно быть goleft. Деликатный случай!