在javascript点击后获取数组的下一个元素，并以搜索形式显示

Getting next element of an array after javascript click and display it in search form

本文关键字：搜索 显示 元素 下一个 javascript 获取 数组      更新时间：2023-09-26

我想创建JS代码，在一些操作后（例如单击后）将数组中的下一个元素放入表单中。

我想在访问某些网站时在控制台（firebug，firefoxF12）中运行此代码。我创建了应该在stackoverflow上工作的代码的测试示例，但它没有，为什么

示例-stackoverflow.com:

在标题区域（id#问题标题）中单击后，数组中的下一个元素应显示在搜索表单输入中（名称q

当我在firefox控制台中运行代码时，它不起作用。

    var arr = ['foo', 'bar', 'baz'];
var i = 0;
function nextItem() {
    i = i + 1; // increase i by one
    i = i % arr.length; // if we've gone too high, start from `0` again
    return arr[i]; // give us back the item of where we are now
}
window.addEventListener('load', function () {
    document.getElementsByName('q').value = arr[0]; // initial value
    document.getElementById('question-header').addEventListener(
        'click', // we want to listen for a click
        function (e) { // the e here is the event itself
            document.getElementsByName('q').value = nextItem();
        }
    );
});

我该怎么修？

input元素是自关闭标记，因此textContent不起作用。它的值可以通过value属性访问：

document.getElementById('search').value = nextItem();

更新：

根据问题更新，我认为代码中的主要问题是在页面加载时附加了侦听器。当您将代码粘贴到浏览器控制台时，您不需要这样做。这是SO:的工作代码

var arr = ['foo', 'bar', 'baz'];
var i = 0;
function nextItem() {
    i = i + 1;
    i = i % arr.length;
    return arr[i];
}
// getElementsByName returns array of elements so access it by index
document.getElementsByName('q')[0].value = arr[0];
// because header contains inner link, add listener on it and prevent it from navigating
var header = document.getElementById('question-header');
var headerLink = header.getElementsByTagName('a')[0];
// when you pass code directly to console, page is (in most cases) already loaded
// you don't need to add listnener to 'load' event
headerLink.addEventListener(
    'click',
    function (e) {
        document.getElementsByName('q')[0].value = nextItem();
        e.preventDefault(); // prevent link to navigate
    }
);

document.getElementsByName('q').value = arr[0]; // initial value

这是错误的（应该会给出一个错误），因为document.getElementsByName('q')是一个没有value属性的nodeList（类似于数组）。很可能只有一个元素名q，所以可以使用[0]来获得第一个（也是唯一一个）元素名。

document.getElementsByName('q')[0].value = arr[0];
// ...
document.getElementsByName('q')[0].value = nextItem();

我建议将这个元素存储在一个变量中，这样你就不会每次都加载它，而只加载一次。

var el = document.getElementsByName('q')[0];
// ...
el.value = arr[0];// or nextItem();

这是有效的：

HTML

<div id="header">
</div>
<form>
<input type="text" id="search" size="16" maxlength="16" /> 
</form>

JS

var arr = ['foo', 'bar', 'baz'];
var i = 0;
var search = document.getElementById('search');
function nextItem() {
    i = i + 1; // increase i by one
    i = i % arr.length; // if we've gone too high, start from `0` again
    return arr[i]; // give us back the item of where we are now
}
window.addEventListener('load', function () {
    search.textContent = arr[0]; // initial value
    document.getElementById('header').addEventListener(
        'click', // we want to listen for a click
        function (e) { // the e here is the event itself
            search.value = nextItem();
        }
    );
});

CSS

#header{
  width:500px;
  background-color:#444444;
  color:#fff;
  text-align:center;
  padding-top:40px;
  padding-bottom:40px;
}

FIDDLE

相关文章：