如何在 HTML 中显示 JavaScript 数组

Posted 2023-05-07

【中文标题】如何在 HTML 中显示 JavaScript 数组

【英文标题】：How to display a JavaScript array in HTML

【发布时间】：2016-02-09 11:05:21

【问题描述】：

我有一个 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);

感谢您的宝贵时间。

【问题讨论】：

我有第二个问题，我添加了另一个名为 no-filter 的过滤器（它添加了 clear）。我怎么能有在开始显示。截至目前，它仅在我循环通过其他过滤器后显示。

【参考方案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 个索引）。

【讨论】：

我应该把它放在哪里？我还在学习 JavaScript。我会将其添加为我的过滤器按钮的一部分吗？

真的有用吗？ JS引擎不会将其转换为字符串，然后您只会将“Object Array”视为值...

changeFilter 正文的末尾。我已经更新了我的答案。

@StrandedKid Hum... 是的，它会起作用：effect 是从数组索引之一的内容初始化的。所以，它包含一个字符串。

@LittleSanti 好吧，我的错误没有仔细阅读 OP 帖子，我想他想显示整个数组内容。