Question

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

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

示例 - stackoverflow.com：

点击标题区域（ id＃question-header ）后，我在数组中的下一个元素应显示在搜索表单输入中（名称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();
        }
    );
});

我该如何解决？

Answer 1

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
    }
);

Answer 2

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();

Answer 3

这是有效的：

<强> 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

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

3 个答案: