はonmouseover属性関数に引数を渡すことはできません - javascriptの

Question

をコードの上に、私は、オブジェクトのテーブルを宣言しました。関数setup（）では、テーブル内のforeachオブジェクトをforemachしようとしています。onmouseover関数を追加し、各オブジェクトを関数pickUp（pick）の引数として渡します。未定義"。私が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とhexをチェックする必要がたとえば、このオンラインコンバータ：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（それだけ配列の範囲を超えた値を指しています）であります。修正する

一つの方法は、関数を返す関数を使用する し、パラメータとしてiまたはpickUps[i]に渡すことです：

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

あなたはES6を使用できる場合は、簡単なソリューションを交換することですvar i ループ内にlet i（ありがとう@alex-kudryashev）です。計算された背景色がrgb、またはrgbaとして保存することができ、または別のブラウザでhexとして（私は、あまりにもrgbとrgbaにそれを変換しているので、

Answer 3

問題は、あなたのループです。 "i"の最後の値が渡されます。この場合、 "i"はピックアップ配列の長さの1倍です。したがって、常に未定義です。

ループをiに依存しないように再構成するだけでなく、iのコピーであるvarを生成しないようにする必要があります。このことができます、または少なくとも