Чем можно заменить 'event' или что можно сделать?

Question

[Арсений Соколовский]

Короче, у меня есть квадратик, который при нажатии на клавишу 'стрелка вправо' - движется вправо. И есть текст 'Press Enter to continue' , когда я нажимаю энтер, вызывается функция , которая переносит меня к этому квадратику, а вот когда я нажимаю на 'стрелка вправо' , то квадратик почему то не движется (
Вот код для ентерa:

function showEntre(){
	
		var menu_btn = $('#continue_menu_btn');
            console.log(menu_btn.attr('class'));
			menu_btn.attr('class', 'menu_cont_btn');
            menu_btn.removeAttr('none');

			var enter_btn = $('#enter');
            console.log(enter_btn.attr('class'));
			enter_btn.attr('class', 'enter');
            enter_btn.removeAttr('none');
			var conpress = 0;
		window.onkeydown = function cont_press(){
			if(event.keyCode==13 && conpress == 0){
				
				conpress = 1;
				document.getElementById('btn_sound').play();
				alert('hi');

				var menu_btn = $('#continue_menu_btn');
            console.log(menu_btn.attr('class'));
			menu_btn.attr('class', 'menu_cont_btn_fade');
            menu_btn.removeAttr('menu_cont_btn');

			var enter_btn = $('#enter');
            console.log(enter_btn.attr('class'));
			enter_btn.attr('class', 'enter_fade');
            enter_btn.removeAttr('enter');

			var logo_big = $('#logo_big');
            console.log(logo_big.attr('class'));
			logo_big.attr('class', 'logo-big-fade');
            logo_big.removeAttr('logo-big');

			setTimeout(showmenu,1000)
			}


		}
			
	  }

а вот для квадратика:

var left = 297;
		var song = 1;
  
      
        window.onkeydown = function move_left(){
	
            if(event.keyCode==37){
					if(document.getElementById('selector').style.left == 297 + 'px'){
						document.getElementById('selector').style.left = 297 + 'px';
					} else {	
                left=left-191;
       
                document.getElementById('selector').style.left = left + 'px';
				song--
				if(song==1){
					document.getElementById('name').innerHTML = 'Rainbow Rhythm';
					document.getElementById('artist').innerHTML = '肥皂菌、易言、音阙诗听/赵方婧...';
					document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FRainbowRhythm_preview.mp4?v=1597781910918';
					document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FRainbowRhythm_cover_albumcoach.png?v=1597782757219';
					}
					if(song==2){
						document.getElementById('name').innerHTML = 'Dont Call Me Up' ;
						document.getElementById('artist').innerHTML = 'Mabel';
						document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FDontCall_preview.mp4?v=1597945854349';
						document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FDontcall_cover_albumcoach.png?v=1597945430658';
					}
					if(song==3){
						document.getElementById('name').innerHTML = 'New World' ;
						document.getElementById('artist').innerHTML = 'Krewella & Yellow Claw ft. Vava';
						document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FNewworldalt_preview.mp4?v=1597827226719';
						document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FNewworldalt_cover_albumcoach.png?v=1597827504336';
					}
					if(song==4){
						document.getElementById('name').innerHTML = 'White Noise' ;
						document.getElementById('artist').innerHTML = 'Disclosure ft. AlunaGeorge';
						document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FWhiteNoise_preview.webm?v=1597766374019';
						document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FWhiteNoise_cover_albumcoach.png?v=1597765865217';
					}
					if(song==5){
						document.getElementById('name').innerHTML = 'Rain Over Me' ;
						document.getElementById('artist').innerHTML = 'Pitbull ft. Marc Anthony';
						document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FRainOverMe_preview.mp4?v=1598816186771';
						document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FRainoverme_cover_albumcoach.png?v=1598816124171';
					}
				}
			
			 }  else if(event.keyCode==39){
				if(document.getElementById('selector').style.left == 1061 + 'px'){
						document.getElementById('selector').style.left = 1061 + 'px';
					} else {
      
                    left=left+191;
        
                    document.getElementById('selector').style.left= left + 'px';
					song++
					if(song==1){
					document.getElementById('name').innerHTML = 'Rainbow Rhythm';
					document.getElementById('artist').innerHTML = '肥皂菌、易言、音阙诗听/赵方婧...';
					document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FRainbowRhythm_preview.mp4?v=1597781910918';
					document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FRainbowRhythm_cover_albumcoach.png?v=1597782757219';
					}
					if(song==2){
						document.getElementById('name').innerHTML = 'Dont Call Me Up' ;
						document.getElementById('artist').innerHTML = 'Mabel';
						document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FDontCall_preview.mp4?v=1597945854349';
						document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FDontcall_cover_albumcoach.png?v=1597945430658';
					}
					if(song==3){
						document.getElementById('name').innerHTML = 'New World' ;
						document.getElementById('artist').innerHTML = 'Krewella & Yellow Claw ft. Vava';
						document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FNewworldalt_preview.mp4?v=1597827226719';
						document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FNewworldalt_cover_albumcoach.png?v=1597827504336';
					}
					if(song==4){
						document.getElementById('name').innerHTML = 'White Noise' ;
						document.getElementById('artist').innerHTML = 'Disclosure ft. AlunaGeorge';
						document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FWhiteNoise_preview.webm?v=1597766374019';
						document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FWhiteNoise_cover_albumcoach.png?v=1597765865217';
					}
					if(song==5){
						document.getElementById('name').innerHTML = 'Rain Over Me' ;
						document.getElementById('artist').innerHTML = 'Pitbull ft. Marc Anthony';
						document.getElementById('autoplay').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FRainOverMe_preview.mp4?v=1598816186771';
						document.getElementById('album').src = 'https://cdn.glitch.com/a6a0bbaf-03fe-4ef4-8220-71abe8276eeb%2FRainoverme_cover_albumcoach.png?v=1598816124171';
					}
                }
			}
        
            }

когда я убрал event у enter ( то есть было event.keydown==13, а стало keydown==13), то квадратик заработал.
Когда я навел курсор мыши на 'event', то я понял что это переменная. Попытался сделать по-логичному; создал var eventt; и вместо event.keydown==13, вставил eventt.keydown==13, но не сработало(
Что делать, помогите..

Answer 1

[Сергей delphinpro]

event — это параметр, объект "Event / Событие", который передается в коллбэк обработчика события.

В вашем случае, нужно примерно так:

window.onkeydown = function move_left(event){
              if(event.keyCode==37){
...

PS. Назвать параметр вы вольны как угодно.

Comments

[Арсений Соколовский]

спасибо!

[Хороший UI]

SokolarGm, обработчики лучше вешайте, через addEventListener, а не через window.on...

const move_left = (event) => {
    if (event.keyCode === 37) {
      // Code...
    }
}

window.addEventListener('keydown', move_left);

Таким образом вы сможете удалять обработчики и вешать несколько обработчиков на одно действие. Да и конвенция такая

window.addEventListener('keydown', fn1);

window.addEventListener('keydown', fn2);

window.removeEventListener('keydown', fn1)