[英]How to display a JavaScript array in HTML
I have a JavaScript application that applies filters to a live video. 我有一个JavaScript应用程序,可将滤镜应用于实时视频。
I was wondering how I can display what the current filter is using inner.HTML after the user hits the filter button. 我想知道如何在用户点击过滤器按钮后显示使用inner.HTML的当前过滤器。
I want to display the current filter (sepia, grayscale etc) in here 我想在这里显示当前的滤镜(棕褐色,灰度等)
<p id="filterName"></p>
Here is my code which changes the filter, I feel I have to put the line of code to display the filter at the end as part of the filter button function. 这是我的代码,它更改了过滤器,我觉得我必须把这行代码放到最后,以显示过滤器作为过滤器按钮功能的一部分。
// 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);
Thank you for your time. 感谢您的时间。
I guess it is simple as this, isn't it? 我想这很简单,不是吗?
var changeFilter = function () {
...
var effect = filters[index++ % filters.length]
...
document.getElementById('filterName').innerHTML=effect;
}
Another suggestion: You'd better update the index
variable before indexing the array: 另一个建议:您最好在索引数组之前更新
index
变量:
index=index++ % filters.length;
var effect=filters[index];
You have correctly avoided the indexing value exceding the array's bounds, but you must also avoid the index
variable exceed the maximum integer bound . 您已经正确地避免了超出数组边界的索引值,但还必须避免
index
变量超过最大整数bound 。
If you wanted to set some of the filters as the initial filter, I recommend you to do it through these steps: 如果要将某些过滤器设置为初始过滤器,建议您通过以下步骤进行操作:
1.Take out all of the changeFilter
's logic (except incrementing index
) to a new function to update the filter: 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.Replace the body of changeFilter
to delegate to the new function: 2.替换
changeFilter
的主体以委托给新函数:
var changeFilter = function () {
index=++index % filters.length; // pre-increment is better
updateFilter();
}
In this way, you have separated the action of updating the filter from the action of changing the filter, so you can reuse it better. 这样,您将更新过滤器的操作与更改过滤器的操作分开了,因此可以更好地重用它。
3.Initialize properly the index variable to the desired initial filter: 3.将index变量正确初始化为所需的初始过滤器:
var index = 5;
4.At the end of the script, call updateFilter
the first time. 4.在脚本末尾,第一次调用
updateFilter
。 This will put the current filter (which initially is the 5th index). 这将放入当前过滤器(最初是第5个索引)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.