如何在 HTML 中显示 JavaScript 数组

Question

我有一个 JavaScript 应用程序，可以将过滤器应用于实时视频。

我想知道如何在用户点击过滤器按钮后显示当前过滤器正在使用的 inner.HTML。

我想在此处显示当前滤镜（棕褐色、灰度等）

<p id="filterName"></p>

这是我更改过滤器的代码，我觉得我必须将显示过滤器的代码行放在最后作为过滤器按钮功能的一部分。

 // CSS filters 
    //this array will cycle through the filter effects
    var index = 0; //the array starts at 0
    var filters = ['grayscale', 'sepia', 'saturate', 'hue', 'invert', 'no-filter'];



    // this applies the filter to the video feed, takes the class of the video feed
    var changeFilter = function () {
        var el = document.getElementById('video');
        el.className = 'videoClass';

        //this will cycle through the filters, once it hits the final filter it will reset
        var effect = filters[index++ % filters.length]
        if (effect) {
            el.classList.add(effect);
            console.log(el.classList);
        }
    }

    //when the user presses the filter button it will apply the first filter in the array
    document.getElementById('filterButton').addEventListener('click', changeFilter);

感谢您的宝贵时间。

Answer 1

我想就这么简单吧？

var changeFilter = function () {
    ...
    var effect = filters[index++ % filters.length]
    ...
    document.getElementById('filterName').innerHTML=effect;
}

另一个建议：你最好在索引数组之前更新index变量：

index=index++ % filters.length;
var effect=filters[index];

您已正确避免超出数组边界的索引值，但您还必须避免index 变量超出最大整数范围。

---

如果您想将某些过滤器设置为初始过滤器，我建议您通过以下步骤进行：

1.将changeFilter的所有逻辑（除了增加index）取出来一个新的函数来更新过滤器：

function updateFilter()
{
    var el = document.getElementById('video');
    el.className = 'videoClass';

    var effect = filters[index];
    if (effect) {
        el.classList.add(effect);
        console.log(el.classList);
    }
    document.getElementById('filterName').innerHTML=effect;
}

2.替换changeFilter的主体，委托给新函数：

var changeFilter = function () {
    index=++index  % filters.length;  // pre-increment is better
    updateFilter();
}

这样，你把更新过滤器的动作和改变过滤器的动作分开了，可以更好的复用。

3.将索引变量正确初始化为所需的初始过滤器：

var index = 5;

4.脚本结束时，第一次调用updateFilter。这将放置当前过滤器（最初是第 5 个索引）。