Javascript ES6 "not a function" error

Question

I have been working on a bunch of JavaScript tutorials that are using some ES6. So far two of the lessons have been throwing the same error, and being new to JavaScript I'm still trying to understand the logic, and so not very good at debugging. I have tried using Babel to convert the ES6 code to plain JavaScript, thinking it was a browser issue, but the same error occurs.

Any help would be greatly appreciated.

The ES6 JavaScript

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
    const suffix = this.dataset.sizing || '';
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

The "Babel" compiled JavaScript

var inputs = document.querySelectorAll('.controls input');
    function handleUpdate() {
        var suffix = this.dataset.sizing || '';
        document.documentElement.style.setProperty('--' + this.name, this.value + suffix);
}

inputs.forEach(function (input) {
    return input.addEventListener('change', handleUpdate);
});

inputs.forEach(function (input) {
    return input.addEventListener('mousemove', handleUpdate);
});

The Error

inputs.forEach is not a function

`document.querySelectorAll` does not return an array. It returns array-like DOM collection, which has no `forEach`.You can use `Array.prototype.forEach.call(inputs, function(input) { ... });`. — Yeldar Kurmangaliyev, Dec 13 '16 at 16:50
@YeldarKurmangaliyev See [forEach method of Node.childNodes?](http://stackoverflow.com/questions/36108712/foreach-method-of-node-childnodes) — guest271314, Dec 13 '16 at 17:21

score 0 · Accepted Answer · answered Dec 13 '16 at 16:55

0

Use Array.from() to convert NodeList returned by Document.querySelectorAll() to Array. You can then use .forEach() chained to input at remainder of javascript.

const inputs = Array.from(document.querySelectorAll('.controls input'));

answered Dec 13 '16 at 16:55

guest271314

1
15
104
177

This worked well in Firefox thank you. However in Chrome (version 41.0.2272.89) I keep getting this error `Unexpected token =>`. The rest of my ES6 is working in Chrome but not "arrow functions". Why is this? – Old Gill Dec 13 '16 at 17:07
@OldGill Why are you using chrome version 41? chrome stable is at version 55. Arrow functions are supported at chromium, chrome 45+. See [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Browser_compatibility) – guest271314 Dec 13 '16 at 17:10
I think its to do with my old operating system. I'm on **OSX Lion 10.7.5** and my Chrome is up to date for this version. I have been reluctant to update my system after reading about serious performance issues updating older **OSX** to **Yosemite**. I'm not sure if the same issues exist with **El Capitan** or **Sierra**, I will have to do some reading on these. – Old Gill Dec 13 '16 at 17:32
@OldGill See https://groups.google.com/a/chromium.org/forum/#!msg/chromium-discuss/0IAwnW-ysXs/kkUkizyGnVkJ , https://download-chromium.appspot.com/?platform=mac . The last link is a raw build of chromium. The availability of the raw build is down for *nix, though is apparently up for mac, as the site states _"Updated 20 minutes ago"_. There are some procedures necessary to run the raw build, though possible. Have not tried OSX, not sure if additional measures need to be taken for osx. See https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.md – guest271314 Dec 13 '16 at 17:44
@OldGill Note, chrome is a branded version of chromium build, and chrome has some caveats; e.g., tracking, etc. chromium is FOSS, chrome is not. See [What's the difference between Google Chrome and/or Chromium? What are the advantages/disadvantages to each?](http://askubuntu.com/questions/6253/whats-the-difference-between-google-chrome-and-or-chromium-what-are-the-advant) – guest271314 Dec 13 '16 at 17:50
1

I appreciate your help and resources, I will definitely look into this. – Old Gill Dec 13 '16 at 22:55

score 0 · Answer 2 · edited Dec 13 '16 at 17:07

First, two things to double check:

Are you running this function before the DOM has finished parsing? If so, wrap this code in a DOMContentLoaded event listener, like this:
```
document.addEventListener('DOMContentLoaded', function() {
    //code here
});
```
Does your browser environment support the forEach method on DOM NodeLists. To check, console.log(NodeList.prototype.forEach); You should get something like: function forEach() { [native code] } if not, it's not supported, hence your error.

To combat no support for NodeList.forEach, you can try this:

var inputs = [].slice.call(document.querySelectorAll('.controls input'));

This will now output an array of elements instead of a NodeList and give you access to the Array.prototype functions

Javascript ES6 "not a function" error

2 Answers2