Question

const add_compressor = (number) => {
    let div = document.createElement('div');
        div.className = 'compressor';

    let threshold = document.createElement('input');
        threshold.type = 'number';
        threshold.className = 'input_number';
        threshold.addEventListener('input', () => {
            compressors[number].threshold.value = threshold.value;
        })

    div.appendChild(threshold);
    added_effects.appendChild(div);
}

add_button.addEventListener('click', () => {
    if (select_effect.value != 'Add Effect...') {
        if (select_effect.value === 'compressor') {
            compressors[compressors.length] = effects[select_effect.value];
            add_compressor(compressors.length - 1);
        }
    }
})

我正在尝试使用此add_compressor函数为Web Audio API创建多个压缩器。一切正常，除了threshold.addEventListener链接到创建的每个压缩器。我想知道是否有可能以这种方式为多个压缩器创建事件监听器。这是一个JS小提琴，在控制台中显示问题。

https://jsfiddle.net/0L1my6kp/

更改压缩器的任何输入框将更改所有压缩器的threshold.value。

Answer 1

问题是你只创建一次压缩器对象，并且每次引用同一个对象。

所以不是这个

const effects = {
    compressor: context.createDynamicsCompressor()
}

应该是

const effects = {
    compressor: context.createDynamicsCompressor
}

然后在单击按钮时创建新的压缩器。查看更新的小提琴：https://jsfiddle.net/0L1my6kp/4/

使用函数创建的HTML元素具有相同的事件侦听器

1 个答案: