Передать оператор с функцией в addEventListener? - PullRequest
Новая
       18

Передать оператор с функцией в addEventListener?

0 голосов
/ 22 января 2019

Прежде чем читать: да, это общий вопрос. Однако ни один из них не решил мою проблему, а также никто / почти никто не использовал цикл for, что вызывает у меня проблемы.

Мой код создает 5 DIV, каждый из которых имеет свой собственный идентификатор и должен иметь своего собственного уникального слушателя onClick. Но добавление eventListener с аргументом не работает так, как я хочу.

Чтобы получить правильный вывод при нажатии элемента onClick, мне нужно передать аргумент функции, которая запускается onClick. Посмотрите на код.

Я видел много других людей, имеющих эту проблему, но никто из них не решил эту проблему. Я пробовал это (анонимная функция): 

div.addEventListener("click", function() {
        calc(i);
    }, false);

Однако на всех слушателях событий я получаю аргумент со значением 6, что означает, что я не получаю отдельные onClicks для DIV (моя цель). Все элементы onClick возвращают "шесть" в консоли. 

for (i = 1; i < 6; i++) {
    var div = document.createElement("div");
    div.setAttribute("id", "i"+i);
    div.setAttribute("class", "test-item");
    div.innerHTML = i;
    div.addEventListener("click", function() {
        calc(i);
    }, false);
    document.querySelector(".testContainer").appendChild(div);
}

function calc(num) {
    switch (num) {
        case 1:
        console.log("one");
            break;
        case 2:
        console.log("two");
            break;
        case 3:
        console.log("three");
            break;
        case 4:
        console.log("four");
            break;
        case 5:
        console.log("five");
            break;
        case 6:
        console.log("six");
            break;
        default:
        console.log("Error");
        break;
    }
  }

Здесь: https://jsfiddle.net/nbps7mdr/3/

Что я ожидаю:

Когда я нажимаю div с номером 1, я получаю «one» в консоли. Я не ожидаю получить «шесть» вообще, потому что максимальное число должно быть 5. Существует что-то неправильное, означающее, что 6 отправляется с i.

Ответы [ 3 ]

0 голосов
/ 22 января 2019

Здесь немного подстроено, не уверен, сработает ли это для вас.Добавлен параметр события и ссылка на текст.Затем разберите в функции. 

for (i = 1; i < 6; i++) {
    var div = document.createElement("div");
    div.setAttribute("id", "i"+i);
    div.setAttribute("class", "test-item");
    div.innerHTML = i;
    div.addEventListener("click", function(event) {
        calc(event.target.innerText);
    }, false);
    document.querySelector(".testContainer").appendChild(div);
}

function calc(num) {
    num=parseInt(num);
    switch (num) {
        case 1:
        console.log("one");
            break;
        case 2:
        console.log("two");
            break;
        case 3:
        console.log("three");
            break;
        case 4:
        console.log("four");
            break;
        case 5:
        console.log("five");
            break;
        case 6:
        console.log("six");
            break;
        default:
        console.log("Error");
        break;
    }
  }
<div class="testContainer"></div>

Другой вариант, работа с областью действия.Объявите локальную переменную в eventListener.Установите значение i (примечание: i является типом значения, поэтому это работает): 

for (let i = 1; i < 6; i++) {
    let div = document.createElement("div");
    div.setAttribute("id", "i"+i);
    div.setAttribute("class", "test-item");
    div.innerHTML = i;
    div.addEventListener("click", function() {
        let n = i;
        calc(n);
    }, false);
    document.querySelector(".testContainer").appendChild(div);
}

function calc(num) {
    switch (num) {
        case 1:
        console.log("one");
            break;
        case 2:
        console.log("two");
            break;
        case 3:
        console.log("three");
            break;
        case 4:
        console.log("four");
            break;
        case 5:
        console.log("five");
            break;
        case 6:
        console.log("six");
            break;
        default:
        console.log("Error");
        break;
    }
  }
<div class="testContainer"></div>
0 голосов
/ 22 января 2019

Пожалуйста, попробуйте следующее решение.И посмотрите на комментарий Чарли Фиша о сфере действия 

const root = document.querySelector('#root');

function init() {
    for (let i = 1; i < 6; i++) {
        const div = createDiv(i);

        div.addEventListener('click', handleClick, true);

        root.appendChild(div);
    }
}

function createDiv(i) {
    const div = document.createElement('div');

    div.id = i;
    div.className = 'test-item';
    div.textContent = i;

    return div;
}

function handleClick(event) {
    const id = parseInt(event.target.id, 10);

    switch(id) {
        case 1:
            console.log('one');
            break;
        case 2:
            console.log('two');
            break;
        case 3:
            console.log('three');
            break;
        case 4:
            console.log('four');
            break;
        case 5:
            console.log('five');
            break;
        case 6:
            console.log('six');
            break;
        default:
            console.log('Error');
    }
}

init();
.test-item {
  border: 1px solid #444;
  margin: 10px;
}
<div id="root"></div>
0 голосов
/ 22 января 2019

Попробуйте изменить цикл for на let.Таким образом, он будет ограничен областью видимости, а не областью охвата. 

for (let i = 1; i < 6; i++) {
    var div = document.createElement("div");
    div.setAttribute("id", "i"+i);
    div.setAttribute("class", "test-item");
    div.innerHTML = i;
    div.addEventListener("click", function() {
        calc(i);
    }, false);
    document.querySelector(".testContainer").appendChild(div);
}
...