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

Question

I would like to create JS code that put next elements from array in form after some action, for example after click.

I want to run this code in console (firebug, firefox F12) while im visiting some website. I created test example of code that should work on stackoverflow but it doesn't, why?

Example - stackoverflow.com:

After clicking in header area (id #question-header), my next element from array should be displayed in search form input (name q).

Code doesnt work when I run it in firefox console.

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

How I can fix it?

@madox2 yea, changed to getElementsByName('q') but still not working. — Michał Lipa
– Michał Lipa, Commented Jan 12, 2016 at 21:16
@madox2 q is input, search is form.. but input still not working — Michał Lipa
– Michał Lipa, Commented Jan 12, 2016 at 21:20
(side note) A quick one-liner for nextItem could be return arr[++i % arr.length]; — Al.G.
– Al.G., Commented Jan 12, 2016 at 21:25

madox2 · Accepted Answer · 2016-01-13 08:30:16Z

4

input elements are self-closing tags therefore textContent does not work. It's value can be accessed by value attribute:

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

UPDATE:

According to question update I think the main problem in your code is that you attach listener on page load. You don't need to do it when you paste code to browser console. Here is the working code on 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
    }
);

edited Jan 13, 2016 at 8:30

answered Jan 12, 2016 at 21:20

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michał Lipa Over a year ago

Code still not working. I just updated my code in post. Changed to: document.getElementsByName('q').value = arr[0];

Michał Lipa Over a year ago

I only get undefined. Im runnig this code in firebug console while I'm on stackoverflow.

Michał Lipa Over a year ago

Now it change search value at beggining, but when I click question-header nothing happens

Al.G. · Accepted Answer · 2016-01-12 21:31:48Z

0

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

This is wrong (should give an error), because document.getElementsByName('q') is a nodeList (similar to array) that has no value property. Most probably you have only one element name q, so you can use [0] to get the first (and only) one.

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

And I'd suggest storing this element in a variable so that you don't load it every time you need it but only once.

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

answered Jan 12, 2016 at 21:31

Al.G.

4,4476 gold badges34 silver badges63 bronze badges

2 Comments

Michał Lipa Over a year ago

Still it's not working. I want to run this code in console during visit at stackoverflow. I click on header, and stackoverflow search input should give me a array element.

Al.G. Over a year ago

@MichałLipa Then look at the update of madox2's answer.

Korgrue · Accepted Answer · 2016-01-12 21:48:35Z

0

This is working:

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

edited Jan 12, 2016 at 21:48

answered Jan 12, 2016 at 21:41

Korgrue

3,4781 gold badge15 silver badges21 bronze badges

1 Comment

Michał Lipa Over a year ago

Yea, its working in this example but I would like to run this code in console during my visit at stackoverflow. I working on stackoverflow elements (want to click on header and get my array element in search input).

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related