CODEWITHSUNDEEP
javascriptarrays
Michał Lipa
Michał Lipa

Reputation: 978

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

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?

Upvotes: 2

Views: 4492

Answers (3)

madox2
madox2

Reputation: 51841

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

Upvotes: 4

Korgrue
Korgrue

Reputation: 3478

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

Upvotes: 0

Al.G.
Al.G.

Reputation: 4387

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

Upvotes: 0

Related Questions