함수에 인수를 전달할 수 없습니다 onmouseover - javascript

Question

코드 상단에 객체 테이블이 선언되었습니다. 그런 다음 함수 setup()에서 테이블에 foreach 객체를 추가하고 onmouseover 함수를 추가하고 각 객체를 함수 pickUp (pick)에 대한 인수로 전달한 다음이 객체 위에 마우스를 놓고 콘솔에 "pick is 정의되지 않음 ". 예를 들어 pickUps [0]을 전달하고 typeof (pickUps [0])가 "객체"를 전달했기 때문에 그것은 나에게 이상합니다. 누군가가 설명하고 각 객체를 인수로 전달하는 것을 도울 수 있습니까?

코드 :

var locked = "#4C8299"; 
var pickedUp = "#CC1B2B"; 
var released = "#19FFC8"; 

var pickUps = document.getElementsByClassName("pickUpSquare"); 

function pickUp(pick){ 
    if (pick.style.background == released){ 
     pick.style.background = pickedUp; 
    } 
} 

function setup(){ 
    for (var i = 0; i < pickUps.length; i++){ 
     pickUps[i].onmouseover = function(){ 
      pickUp(pickUps[i]); 
     } 
    } 
} 

window.onload = setup; 

Answer 1

, 당신은 계산 된 배경 색상은 rgb, 또는 rgba로 저장 될 수 있기 때문에, 귀하의 경우 rgb, rgba 및 hex을 확인하기 위해, 또는 다른 브라우저에서 hex (I 너무 rgb 및 rgba로 변환 한 등, 예를 들어 온라인 변환기 인 http://hex2rgba.devoth.com/을 통해이 작업을 수행 할 수 있습니다. 요소의 계산 된 스타일을 가져 오려면 pick.style.background 대신 window.getComputedStyle(element).getPropertyValue(property)과 같이해야합니다. 그리고 제공되는 코드에서 pickUp(pickUps[i]);는 요소를 함수에 전달할하지 않으며, 오류가 발생

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

그래서 내가 this 키워드를 교체했다.

var lockedRgb = "rgb(76, 130, 153)"; 
 
var lockedRgba = "rgba(76, 130, 153, 1)"; 
 
var lockedHex = "#4C8299"; 
 
var pickedUpRgb = "rgb(204, 27, 43)"; 
 
var pickedUpRgba = "rgba(204, 27, 43, 1)"; 
 
var pickedUpHex = "#CC1B2B"; 
 
var releasedRgb = "rgb(25, 255, 200)"; 
 
var releasedRgba = "rgba(25, 255, 200, 1)"; 
 
var releasedHex = "#19FFC8"; 
 

 
var pickUps = document.getElementsByClassName("pickUpSquare"); 
 

 
function pickUp(pick){ 
 
    var currentBgc = window.getComputedStyle(pick).getPropertyValue("background-color"); 
 
    if (currentBgc === releasedRgb || currentBgc === releasedRgba || currentBgc === releasedHex){ 
 
     pick.style.backgroundColor = pickedUpRgb; 
 
    } 
 
} 
 

 
function setup(){ 
 
    for (var i = 0; i < pickUps.length; i++){ 
 
     pickUps[i].onmouseover = function(){ 
 
      pickUp(this); 
 
     } 
 
    } 
 
} 
 

 
window.onload = setup;

.pickUpSquare { 
 
    background-color: rgb(25,255,200); 
 
}

<div class="pickUpSquare">1</div> 
 
<div class="pickUpSquare">2</div> 
 
<div class="pickUpSquare">3</div>

Answer 2

문제 setup 함수의 루프 i 변수 내부 익명 함수 정의의 폐쇄의 일부라는 것이다. 이와 같이 는 pickUps[i] 사용됩니다 순간, 루프 긴 완료 및 i의 값은 pickUps.length, 이고 그래서 pickUps[i]의 값이 undefined (그냥 배열의 경계를 넘어 값을 가리키는 것)입니다 . 당신이 ES6를 사용할 수있는 경우

pickUps[i].onmouseover = (function(pick) { 
    return function() { pickUp(pick); } 
})(pickUps[i]); 

, 다음 간단한 솔루션을 대체하는 것입니다 해결하기 위해

한 가지 방법은, 을하는 함수를 반환하는 함수를 사용하여 매개 변수로에 i 또는 pickUps[i]을 전달하는 것입니다 var i은 for 루프 (감사 @alex-kudryashev)의 let i입니다. 먼저

Answer 3

문제는 당신의 루프 : 아래

는 작업 조각입니다. "i"의 마지막 값은 건네지는 것입니다.이 경우, "i"는 pickups 배열의 길이보다 하나 크기 때문에 항상 정의되지 않습니다.

당신은 i에 의존하지 않고 루프를 재구성해야 할뿐만 아니라 i의 복사본 인 var를 생성하지 않아야합니다. 이 도움이, 또는 적어도