Не могу передать аргумент функции onmouseover - JavaScript

1

В верхней части кода я объявлял таблицу объектов. Затем, в функции 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;
Теги:
mouseevent
parameter-passing
onmouseover

3 ответа

0
Лучший ответ

Во-первых, вам нужно проверить rgb, rgba и hex в вашем случае, потому что вычисленный фоновый цвет может быть сохранен как rgb или rgba или как hex в разных браузерах (я тоже преобразовал его в rgb и rgba, вы можете это сделать например, через этот онлайн-конвертер: http://hex2rgba.devoth.com/). Если вы хотите получить вычисленный стиль элемента, вы должны сделать это следующим образом: window.getComputedStyle(element).getPropertyValue(property) вместо pick.style.background. И в предоставленном коде pickUp(pickUps[i]); не переходит к функции элемента, и произошла ошибка:

Uncaught TypeError: Не удалось выполнить 'getComputedStyle' в 'Window': параметр 1 не имеет тип '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>
Поделиться
  • 0
    Вау, спасибо большое! Это фактически решило мою следующую проблему: D
  • 0
    @ Миоклон, приятно слышать, что это помогает!
Показать ещё 4 комментария
1

Проблема в том, что переменная i в цикле функции setup является частью закрытия определения внутренней анонимной функции. Таким образом, в тот момент, когда используется 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 в цикле for (спасибо @alex-kudryashev).

Поделиться
  • 0
    Спасибо д! Виноват. Решение сработало;)
0

Проблема в вашей петле. Последнее значение "i" - это то, что передается. В этом случае "i" - это больше, чем длина массива pickups, поэтому он всегда не определен.

Вам придется реструктурировать свой цикл, чтобы не зависеть от i, но также не создавать var, которые являются только копиями i. Это похоже на работу:

for (let pu of pickUps){
    pu.onmouseover = function(){
        pickUp(pu);
   }
}

Надеюсь, что это поможет, или, по крайней мере, предлагает ответ

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню