키 누르기에서 불투명도를 대화식으로 조정 하시겠습니까?

Question

저는 꽤 프로그래밍에 익숙하지 않아이 코드를 실행중인 실험을 위해 도움이 필요합니다 (대학원에서). 사용자가 왼쪽 및 오른쪽 화살표 키를 눌러 이미지의 불투명도를 조정할 수있게하려고합니다. 또한 문제가되는 경우 Qualtrics에서이 작업을 수행합니다. 다음 자바 스크립트 코드는 나를 위해 작동하지 않습니다 ... 당신의 도움을 많이 주시면 감사하겠습니다!

var op =0.1; 
var op1 = 10; 
var step = 10; 
var min = 0.1, max = 1; 
var min1 = 10, max1 = 100; 

var image = document.getElementById("image"); 
image.style.opacity = op; 
image.style.filter = alpha(opacity=op1); 

Event.observe(document, 'keydown', function(e) { 
    if(e.keyCode == 37) { 
    op-=step; 
    op1-=step; 
    op = Math.max(min, op); 
    op1 = Math.max(min, op1); 
    } else if(e.keyCode == 39) { 
    op+=step; 
    op1+=step; 
    image.style.opacity = Math.min(max, op); 
    op1 = Math.min(max, op1); 
    } 
}); 

Answer 1

코드를 수정하지 않고도 코드를 약간 수정했습니다. 희망이에서 제대로 작동하려면 모든 것을 얻을 수 있습니다 :

var op =0.1; 
var op1 = 10; 
var step = .1; //changed to .1 from 10 
var min = 0.1, max = 1; 
var min1 = 10, max1 = 100; 

var image = document.getElementById("image"); 
image.style.opacity = op; 
//image.style.filter = alpha(opacity=op1); //removed (implement browser check if IE) 

$(document).on('keydown', function(e) { 
    if(e.keyCode === 37) { //made === (preference) 
    op-=step; 
    op1-=step; 
    op = Math.max(min, op); 
    op1 = Math.max(min, op1); 
    image.style.opacity = Math.min(max, op); //added 
    } else if(e.keyCode === 39) {//made === (preference) 
    op+=step; 
    op1+=step; 
    image.style.opacity = Math.min(max, op); 
    op1 = Math.min(max, op1); 
    } 
}); 

Example

참고 : 위의 예에서 (오른쪽 하단)을 results 상자에 클릭해야합니다 왼쪽/오른쪽 화살표 키를 누르기 전에.